/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* ==========================================================================
   OpenDAL CSS Variables
   --------------------------------------------------------------------------
   "One Layer, All Storage." A precise, engineering-grade visual system built
   on a near-monochrome ink scale, a single precise-blue accent, and the
   signature solid "bar" lifted from the OpenDAL wordmark.

   CSS variable layers:
     1. Primitives  — raw, theme-agnostic values (--odl-ink-*, --odl-blue-*)
     2. Semantic    — meaning-bound, theme-aware roles (--odl-bg, --odl-fg ...)
     3. Infima map  — semantic CSS variables projected onto Docusaurus/Infima
                      vars so docs, blog and community pages inherit the same
                      system.

   Typography uses native system stacks on purpose: zero third-party requests
   (ASF privacy-friendly), zero layout shift, instant global rendering. The
   monospace stack is promoted to a brand motif (labels, indices, figures).
   To adopt IBM Plex instead, self-host it and swap --odl-font-* below.
   ========================================================================== */

/* ---- 1. Primitive CSS variables ------------------------------------------ */
:root {
  /* Ink — a cool, neutral near-black→white ramp */
  --odl-ink-0: #ffffff;
  --odl-ink-50: #f6f8fa;
  --odl-ink-100: #edf1f5;
  --odl-ink-150: #e4e9ef;
  --odl-ink-200: #d8dee6;
  --odl-ink-300: #c2cad4;
  --odl-ink-400: #98a2b0;
  --odl-ink-500: #6e7886;
  --odl-ink-600: #4f5864;
  --odl-ink-700: #39414b;
  --odl-ink-800: #262c34;
  --odl-ink-850: #1b2027;
  --odl-ink-900: #12161b;
  --odl-ink-950: #0a0d11;

  /* Precise blue — the single brand accent */
  --odl-blue-50: #edf3ff;
  --odl-blue-100: #d8e5ff;
  --odl-blue-200: #b4ccff;
  --odl-blue-300: #85a9ff;
  --odl-blue-400: #5384ff;
  --odl-blue-500: #2c63f5;
  --odl-blue-600: #1e54e0;
  --odl-blue-700: #1846be;
  --odl-blue-800: #163a97;
  --odl-blue-900: #163172;

  /* Functional signals (kept restrained, mostly for inherited docs UI) */
  --odl-green-500: #1a8f5e;
  --odl-green-400: #36c08a;
  --odl-amber-500: #b7791f;
  --odl-amber-400: #e0a93b;
  --odl-red-500: #d23b3b;
  --odl-red-400: #f06363;

  /* Type families — system stacks with a clear engineering character */
  --odl-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --odl-font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code",
    "JetBrains Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono",
    monospace;

  /* Type scale */
  --odl-text-2xs: 0.6875rem; /* 11px — mono micro-labels */
  --odl-text-xs: 0.75rem; /* 12px */
  --odl-text-sm: 0.875rem; /* 14px */
  --odl-text-base: 1rem; /* 16px */
  --odl-text-md: 1.125rem; /* 18px */
  --odl-text-lg: 1.375rem; /* 22px */
  --odl-text-xl: 1.75rem; /* 28px */
  --odl-text-2xl: 2.25rem; /* 36px */
  --odl-text-3xl: 3rem; /* 48px */
  --odl-text-display: clamp(2.75rem, 1.6rem + 5.2vw, 5rem);
  --odl-leading-tight: 1.08;
  --odl-leading-snug: 1.28;
  --odl-leading-normal: 1.6;
  --odl-tracking-tight: -0.022em;
  --odl-tracking-label: 0.12em;

  /* Spacing — 4px rhythm */
  --odl-space-1: 0.25rem;
  --odl-space-2: 0.5rem;
  --odl-space-3: 0.75rem;
  --odl-space-4: 1rem;
  --odl-space-5: 1.5rem;
  --odl-space-6: 2rem;
  --odl-space-7: 3rem;
  --odl-space-8: 4rem;
  --odl-space-9: 6rem;
  --odl-space-10: 8rem;

  /* Radius — restrained; the bar motif stays sharp (0) */
  --odl-radius-xs: 3px;
  --odl-radius-sm: 5px;
  --odl-radius-md: 8px;
  --odl-radius-lg: 12px;
  --odl-radius-pill: 999px;

  /* Layout */
  --odl-container: 1200px;
  --odl-container-narrow: 880px;
  --odl-gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem);

  /* Motion */
  --odl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --odl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --odl-dur-fast: 120ms;
  --odl-dur: 200ms;
  --odl-dur-slow: 320ms;
}

/* ---- 2. Semantic CSS variables — light (default) ------------------------- */
:root {
  --odl-bg: var(--odl-ink-0);
  --odl-bg-subtle: var(--odl-ink-50);
  --odl-bg-inset: var(--odl-ink-100);
  --odl-surface: var(--odl-ink-0);
  --odl-surface-2: var(--odl-ink-50);
  --odl-fg: var(--odl-ink-900);
  --odl-fg-strong: var(--odl-ink-950);
  --odl-fg-muted: var(--odl-ink-600);
  --odl-fg-subtle: var(--odl-ink-500);
  --odl-border: var(--odl-ink-200);
  --odl-border-strong: var(--odl-ink-300);
  --odl-bar: var(--odl-ink-950);

  --odl-accent: var(--odl-blue-600);
  --odl-accent-hover: var(--odl-blue-700);
  --odl-accent-subtle: var(--odl-blue-50);
  --odl-accent-border: var(--odl-blue-200);
  --odl-link: var(--odl-blue-600);

  /* Solid action surface — vivid blue with white text in both themes */
  --odl-action-bg: var(--odl-blue-600);
  --odl-action-bg-hover: var(--odl-blue-700);
  --odl-action-fg: #ffffff;

  --odl-code-bg: var(--odl-ink-50);
  --odl-code-border: var(--odl-ink-150);
  --odl-selection: var(--odl-blue-100);
  --odl-navbar-icon: var(--odl-fg-muted);
  --odl-navbar-icon-hover: var(--odl-accent);
  --odl-search-border: var(--odl-border-strong);
  /* Percent-encoded inline SVG used only as a mask shape; icon color comes from navbar tokens. */
  --odl-search-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='16px' width='16px'%3E%3Cpath d='M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z'/%3E%3C/svg%3E");
  --odl-github-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
  --odl-discord-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z'/%3E%3C/svg%3E");

  --odl-grid-line: rgba(18, 22, 27, 0.05);
  --odl-shadow-sm: 0 1px 2px rgba(10, 13, 17, 0.06),
    0 1px 1px rgba(10, 13, 17, 0.04);
  --odl-shadow-md: 0 4px 12px rgba(10, 13, 17, 0.07),
    0 1px 3px rgba(10, 13, 17, 0.05);
  --odl-shadow-lg: 0 18px 40px rgba(10, 13, 17, 0.1),
    0 4px 12px rgba(10, 13, 17, 0.06);
}

/* ---- 2b. Semantic CSS variables — dark ----------------------------------- */
[data-theme="dark"] {
  --odl-bg: #0a0d11;
  --odl-bg-subtle: #0e1218;
  --odl-bg-inset: #12161d;
  --odl-surface: #11161c;
  --odl-surface-2: #161c24;
  --odl-fg: #e7ebf0;
  --odl-fg-strong: #f6f8fa;
  --odl-fg-muted: #9aa6b3;
  --odl-fg-subtle: #76828f;
  --odl-border: #242c35;
  --odl-border-strong: #313b46;
  --odl-bar: #f6f8fa;

  --odl-accent: var(--odl-blue-300);
  --odl-accent-hover: var(--odl-blue-200);
  --odl-accent-subtle: rgba(44, 99, 245, 0.14);
  --odl-accent-border: rgba(133, 169, 255, 0.32);
  --odl-link: var(--odl-blue-300);

  --odl-action-bg: var(--odl-blue-500);
  --odl-action-bg-hover: var(--odl-blue-400);
  --odl-action-fg: #ffffff;

  --odl-code-bg: #0e131a;
  --odl-code-border: #232b35;
  --odl-selection: rgba(44, 99, 245, 0.36);
  --odl-search-border: var(--odl-ink-600);

  --odl-grid-line: rgba(255, 255, 255, 0.045);
  --odl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --odl-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --odl-shadow-lg: 0 22px 48px rgba(0, 0, 0, 0.6);
}

/* ---- 3. Project onto Infima so docs/blog inherit the system -------------- */
:root {
  --ifm-color-primary: #1e54e0;
  --ifm-color-primary-dark: #1b4bca;
  --ifm-color-primary-darker: #1846be;
  --ifm-color-primary-darkest: #163a9c;
  --ifm-color-primary-light: #3568ef;
  --ifm-color-primary-lighter: #4c79f1;
  --ifm-color-primary-lightest: #79a0f5;

  --ifm-background-color: var(--odl-bg);
  --ifm-background-surface-color: var(--odl-surface);
  --ifm-font-color-base: var(--odl-fg);
  --ifm-heading-color: var(--odl-fg-strong);
  --ifm-font-family-base: var(--odl-font-sans);
  --ifm-heading-font-family: var(--odl-font-sans);
  --ifm-font-family-monospace: var(--odl-font-mono);
  --ifm-font-size-base: 16px;
  --ifm-line-height-base: 1.6;
  --ifm-link-color: var(--odl-link);
  --ifm-link-hover-color: var(--odl-accent-hover);

  --ifm-heading-font-weight: 650;
  --ifm-font-weight-semibold: 600;

  --ifm-navbar-background-color: var(--odl-surface);
  --ifm-navbar-shadow: inset 0 -1px 0 var(--odl-border);
  --ifm-navbar-link-color: var(--odl-fg-muted);
  --ifm-navbar-link-hover-color: var(--odl-fg-strong);
  --ifm-navbar-search-input-icon: none;

  --ifm-toc-border-color: var(--odl-border);
  --ifm-color-emphasis-200: var(--odl-border);
  --ifm-color-emphasis-300: var(--odl-border-strong);

  --ifm-code-font-size: 0.9em;
  --ifm-code-background: var(--odl-code-bg);
  --ifm-code-border-radius: var(--odl-radius-sm);
  --ifm-pre-background: var(--odl-code-bg);

  --ifm-button-border-radius: var(--odl-radius-md);
  --ifm-global-radius: var(--odl-radius-md);

  --docusaurus-highlighted-code-line-bg: rgba(30, 84, 224, 0.1);

  --footer-font-color: var(--odl-fg-muted);
  --footer-column-width: unset;
  --footer-row-max-width: 1100px;
}

[data-theme="dark"] {
  --ifm-color-primary: #5384ff;
  --ifm-color-primary-dark: #3568ef;
  --ifm-color-primary-darker: #2c63f5;
  --ifm-color-primary-darkest: #1e54e0;
  --ifm-color-primary-light: #79a0f5;
  --ifm-color-primary-lighter: #95b5f8;
  --ifm-color-primary-lightest: #b4ccff;

  --ifm-navbar-background-color: var(--odl-surface);
  --ifm-navbar-shadow: inset 0 -1px 0 var(--odl-border);
  --docusaurus-highlighted-code-line-bg: rgba(83, 132, 255, 0.16);
}