/* ============================================================================
   Design tokens
   ----------------------------------------------------------------------------
   The single source of truth for color, type, spacing, radius and motion.
   Everything downstream consumes these custom properties, so light/dark theming
   and future re-skins are a matter of swapping values here — never selectors.

   Tokens deliberately live OUTSIDE @layer so they always resolve regardless of
   layer ordering. This file is linked first and also declares the cascade-layer
   order for every stylesheet that follows.
   ============================================================================ */

@layer base, components, utilities;

:root {
  /* Native widgets (checkboxes, selects, scrollbars) follow the active theme
     rather than the OS default. The dark blocks below flip this to `dark`. */
  color-scheme: light;

  /* --- Radius ------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* --- Type --------------------------------------------------------------- */
  /* Geist drives the whole surface; Geist Mono carries code, IDs and tabular
     figures. System faces trail as fallbacks so text stays readable before the
     webfont (loaded in the layout head) swaps in. */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Spacing scale (4px base) ------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* --- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --speed-fast: 0.14s;
  --speed: 0.22s;

  /* --- Surfaces & text (light, warm paper) ------------------------------- */
  --bg-primary: #fefdfa;
  --bg-secondary: #f8f7f2;
  --bg-tertiary: #f1f0ea;
  --text-primary: #22201d;
  --text-secondary: #67635d;
  --text-tertiary: #96918b;
  --border: rgba(45, 38, 26, 0.13);
  --border-strong: rgba(45, 38, 26, 0.24);

  /* --- Brand accent & data viz ------------------------------------------- */
  /* Ultramarine ink: the near-complement of the warm paper surfaces, so the
     brand reads as ink on cream rather than blending into the neutrals. */
  --accent: #443dd6;
  --accent-soft: rgba(68, 61, 214, 0.14);
  /* Links stay in the brand's indigo family, deepened past the raw accent so
     body-size link text clears 4.5:1 on every surface tier. */
  --link: #3a33c0;
  --chart-1: #443dd6;
  /* The categorical slots after the indigo chart-1 spread the hue wheel —
     teal, amber, magenta, lime — and alternate lightness, so neighboring
     donut slices differ in brightness as well as hue; hue alone isn't enough
     contrast for fills that sit side by side. */
  --chart-2: #0c9184;
  --chart-3: #e08700;
  --chart-4: #d81b7d;
  --chart-5: #65a30d;
  --chart-grid: rgba(45, 38, 26, 0.07);

  /* --- Trend (up / down) ------------------------------------------------- */
  --up: #007b40;
  --up-bg: #d5f7e2;
  --down: #b6322d;
  --down-bg: #ffe2dd;

  /* --- Semantic families ------------------------------------------------- */
  --info-bg: #d6f0ff;     --info-text: #01538b;     --info-border: #9ec9f3;
  --success-bg: #d5f7e2;  --success-text: #006236;  --success-border: #a7e4c2;
  --warning-bg: #ffe9cc;  --warning-text: #734400;  --warning-border: #f0cf9c;
  --danger-bg: #ffe2dd;   --danger-text: #83312b;   --danger-border: #f1b2aa;
  --purple-bg: #ede8ff;   --purple-text: #524189;

  /* --- Elevation & focus ------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(45, 38, 26, 0.06);
  --shadow-md: 0 6px 22px rgba(45, 38, 26, 0.10);
  /* Edge haze painted inside horizontal scroll containers (cards, table
     wraps) where content clips; matching surface-colored covers hide it at
     the scrolled-to edge. */
  --scroll-shadow: rgba(45, 38, 26, 0.25);
  --ring: 0 0 0 2px var(--bg-primary), 0 0 0 3.5px color-mix(in srgb, var(--accent) 60%, transparent);

  /* --- Select chevron ----------------------------------------------------- */
  /* Data URIs can't reference custom properties, so the stroke color is baked
     in per theme (text-secondary). */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2367635d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Dark theme. Two entry points, deliberately kept as parallel blocks:
   1. OS prefers dark AND the user hasn't forced light  (system default)
   2. The user explicitly selects dark                  ([data-theme="dark"])
   Keeping them separate avoids a selector list where one branch's specificity
   could leak onto the other. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg-primary: #1d1b19;
    --bg-secondary: #141210;
    --bg-tertiary: #0a0907;
    --text-primary: #eae7e3;
    --text-secondary: #95918c;
    --text-tertiary: #6e6963;
    --border: rgba(240, 235, 226, 0.14);
    --border-strong: rgba(240, 235, 226, 0.24);

    --accent: #8b93ff;
    --accent-soft: rgba(139, 147, 255, 0.20);
    --link: #8b93ff;
    --chart-1: #8b93ff;
    /* Same categorical strategy as light: hues spread wide with lightness
       alternating — the old four pastels sat at near-identical brightness
       and blurred together in a donut. */
    --chart-2: #33e0c0;
    --chart-3: #ffbe3d;
    --chart-4: #f06ea9;
    --chart-5: #a4d94e;
    --chart-grid: rgba(240, 235, 226, 0.08);

    --up: #6bcb97;        --up-bg: #123724;
    --down: #f98f84;      --down-bg: #472320;

    --info-bg: #163149;     --info-text: #8fcaff;     --info-border: #295074;
    --success-bg: #123724;  --success-text: #8bd8ab;  --success-border: #2c5a3f;
    --warning-bg: #3f2b0a;  --warning-text: #eabb79;  --warning-border: #6b4d18;
    --danger-bg: #472320;   --danger-text: #feaba1;   --danger-border: #703c36;
    --purple-bg: #302a48;   --purple-text: #c5b9ff;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.40);
    --scroll-shadow: rgba(0, 0, 0, 0.65);

    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2395918c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary: #1d1b19;
  --bg-secondary: #141210;
  --bg-tertiary: #0a0907;
  --text-primary: #eae7e3;
  --text-secondary: #95918c;
  --text-tertiary: #6e6963;
  --border: rgba(240, 235, 226, 0.14);
  --border-strong: rgba(240, 235, 226, 0.24);

  --accent: #8b93ff;
  --accent-soft: rgba(139, 147, 255, 0.20);
  --link: #8b93ff;
  --chart-1: #8b93ff;
  --chart-2: #33e0c0;
  --chart-3: #ffbe3d;
  --chart-4: #f06ea9;
  --chart-5: #a4d94e;
  --chart-grid: rgba(240, 235, 226, 0.08);

  --up: #6bcb97;        --up-bg: #123724;
  --down: #f98f84;      --down-bg: #472320;

  --info-bg: #163149;     --info-text: #8fcaff;     --info-border: #295074;
  --success-bg: #123724;  --success-text: #8bd8ab;  --success-border: #2c5a3f;
  --warning-bg: #3f2b0a;  --warning-text: #eabb79;  --warning-border: #6b4d18;
  --danger-bg: #472320;   --danger-text: #feaba1;   --danger-border: #703c36;
  --purple-bg: #302a48;   --purple-text: #c5b9ff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.40);
  --scroll-shadow: rgba(0, 0, 0, 0.65);

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2395918c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}