/* Design tokens.
 *
 * Deliberate departures from the old build:
 *   - no glassmorphism, no backdrop-filter, no animated gradient (that loop
 *     repainted the whole viewport forever and cost real battery)
 *   - flat surfaces separated by borders and spacing, depth lives in motion
 *   - one accent, used as a fill with dark ink on top, never as body text
 *   - logical properties everywhere so RTL is free
 */

:root {
  color-scheme: light dark;

  /* --- palette: dark is the default expression ------------------------- */
  --bg: #08090b;
  --bg-elevated: #101114;
  --surface: #141519;
  --surface-hover: #1b1d22;
  --line: #24262c;
  /* Control borders need 3:1 against their fill (WCAG 1.4.11 non-text). */
  --line-strong: #62656d;

  --text: #f4f4f5;
  --text-dim: #a1a1aa;
  /* Chosen to clear WCAG AA (4.5:1) on --surface, not picked by eye.
     `.faint` and `.field__help` are readable copy, not decoration. */
  --text-faint: #82828c;

  --accent: #d4ff3f;        /* fill */
  --accent-ink: #0b0d05;    /* text ON accent */
  --accent-text: #c3ee2e;   /* accent used as text/icon on --bg */
  --accent-soft: rgba(212, 255, 63, 0.14);

  --warn: #ffb224;
  --warn-soft: rgba(255, 178, 36, 0.14);
  --danger: #ff5a5f;
  --danger-soft: rgba(255, 90, 95, 0.14);
  --calm: #7aa2ff;

  /* --- type ------------------------------------------------------------ */
  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Noto Sans Arabic", "IBM Plex Sans Arabic", "Dubai", "Tahoma",
    system-ui, sans-serif;
  --font-numeric: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace,
    "Cascadia Mono", Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.5rem;
  --text-hero: clamp(3.5rem, 14vw, 7rem);

  /* --- space & shape --------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);

  /* --- motion: springy, not linear ------------------------------------- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  --rail: 232px;
}

/* Light theme. Accent stays a fill; a separate token carries accent-as-text
   because lime on white fails contrast badly. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfbf9;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f4f4f2;
    --line: #e6e6e1;
    --line-strong: #93938c;

    --text: #16171a;
    --text-dim: #5c5f66;
    --text-faint: #70737a;

    --accent: #c9f22e;
    --accent-ink: #10130a;
    --accent-text: #4f7000;
    --accent-soft: rgba(160, 208, 20, 0.18);

    --warn: #9a6100;
    --warn-soft: rgba(255, 178, 36, 0.18);
    --danger: #c3282d;
    --danger-soft: rgba(255, 90, 95, 0.14);
    --calm: #2f5bd0;

    --shadow-lift: 0 1px 2px rgba(20, 20, 20, 0.06), 0 8px 24px rgba(20, 20, 20, 0.07);
  }
}

/* Explicit user choice always beats the OS, in both directions. */
:root[data-theme="dark"] {
  --bg: #08090b;
  --bg-elevated: #101114;
  --surface: #141519;
  --surface-hover: #1b1d22;
  --line: #24262c;
  --line-strong: #62656d;
  --text: #f4f4f5;
  --text-dim: #a1a1aa;
  --text-faint: #82828c;
  --accent: #d4ff3f;
  --accent-ink: #0b0d05;
  --accent-text: #c3ee2e;
  --accent-soft: rgba(212, 255, 63, 0.14);
  --warn: #ffb224;
  --danger: #ff5a5f;
  --calm: #7aa2ff;
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
}

:root[data-theme="light"] {
  --bg: #fbfbf9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-hover: #f4f4f2;
  --line: #e6e6e1;
  --line-strong: #93938c;
  --text: #16171a;
  --text-dim: #5c5f66;
  --text-faint: #70737a;
  --accent: #c9f22e;
  --accent-ink: #10130a;
  --accent-text: #4f7000;
  --accent-soft: rgba(160, 208, 20, 0.18);
  --warn: #9a6100;
  --danger: #c3282d;
  --calm: #2f5bd0;
  --shadow-lift: 0 1px 2px rgba(20, 20, 20, 0.06), 0 8px 24px rgba(20, 20, 20, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}


/* ============================================================= hat accents
 *
 * Each hat carries a colour, and the colour rebinds the four accent tokens for
 * whatever subtree wears it. Because these are plain custom properties, the
 * SAME rule serves both jobs: put `data-hat` on <html> and the whole app takes
 * the colour of the hat you are wearing; put it on a single card and only that
 * card is tinted. No JavaScript theming, no duplicate stylesheets.
 *
 * The ramp runs lime → mint → cyan → electric blue → violet → magenta → coral
 * → amber: a full turn of the wheel, so no two adjacent hats read as the same
 * colour to someone glancing at a list.
 *
 * Every value here was generated against the WCAG formula, not chosen by eye.
 * The floors held for all eight in both themes:
 *   --accent-ink on --accent  >= 7:1   (text on the fill)
 *   --accent-text on --bg     >= 4.5:1 (accent used as text — AA)
 *   --accent on --bg          >= 3:1   (1.4.11, non-text UI)
 * `--accent-text` exists precisely because the vivid fills fail as text; the
 * bright lime that works on black is illegible on white.
 */

[data-hat="lime"] {
  --accent: #d4ff3f;
  --accent-ink: #0b0d05;
  --accent-text: #c3ee2e;
  --accent-soft: rgba(212, 255, 63, 0.14);
}

[data-hat="mint"] {
  --accent: #00e673;
  --accent-ink: #06140d;
  --accent-text: #0ab861;
  --accent-soft: rgba(0, 230, 115, 0.14);
}

[data-hat="cyan"] {
  --accent: #00d2e6;
  --accent-ink: #061314;
  --accent-text: #0aaab8;
  --accent-soft: rgba(0, 210, 230, 0.14);
}

[data-hat="electric"] {
  --accent: #479dff;
  --accent-ink: #060c14;
  --accent-text: #0c75ed;
  --accent-soft: rgba(71, 157, 255, 0.14);
}

[data-hat="violet"] {
  --accent: #b185ff;
  --accent-ink: #0b0614;
  --accent-text: #9055f6;
  --accent-soft: rgba(177, 133, 255, 0.14);
}

[data-hat="magenta"] {
  --accent: #ff57cd;
  --accent-ink: #140610;
  --accent-text: #e40ca3;
  --accent-soft: rgba(255, 87, 205, 0.14);
}

[data-hat="coral"] {
  --accent: #ff6d57;
  --accent-ink: #140806;
  --accent-text: #e92a0c;
  --accent-soft: rgba(255, 109, 87, 0.14);
}

[data-hat="amber"] {
  --accent: #e6a100;
  --accent-ink: #141006;
  --accent-text: #b8840a;
  --accent-soft: rgba(230, 161, 0, 0.14);
}


/* Light theme, whether it arrives from the OS or from an explicit choice. */
@media (prefers-color-scheme: light) {
  [data-hat="lime"] {
    --accent: #c9f22e;
    --accent-ink: #10130a;
    --accent-text: #4f7000;
    --accent-soft: rgba(160, 208, 20, 0.18);
  }
  [data-hat="mint"] {
    --accent: #09ce6b;
    --accent-ink: #08170f;
    --accent-text: #038645;
    --accent-soft: rgba(9, 206, 107, 0.18);
  }
  [data-hat="cyan"] {
    --accent: #09bdce;
    --accent-ink: #081617;
    --accent-text: #04808b;
    --accent-soft: rgba(9, 189, 206, 0.18);
  }
  [data-hat="electric"] {
    --accent: #54a0f8;
    --accent-ink: #080f17;
    --accent-text: #066ee5;
    --accent-soft: rgba(84, 160, 248, 0.18);
  }
  [data-hat="violet"] {
    --accent: #b085fa;
    --accent-ink: #0d0817;
    --accent-text: #8642fa;
    --accent-soft: rgba(176, 133, 250, 0.18);
  }
  [data-hat="magenta"] {
    --accent: #f862cb;
    --accent-ink: #170812;
    --accent-text: #d60597;
    --accent-soft: rgba(248, 98, 203, 0.18);
  }
  [data-hat="coral"] {
    --accent: #f87662;
    --accent-ink: #170a08;
    --accent-text: #e02306;
    --accent-soft: rgba(248, 118, 98, 0.18);
  }
  [data-hat="amber"] {
    --accent: #d39609;
    --accent-ink: #171208;
    --accent-text: #956a04;
    --accent-soft: rgba(211, 150, 9, 0.18);
  }
}

/* An explicit light choice beats the OS, for hats as for everything else. */
:root[data-theme="light"] [data-hat="lime"],
:root[data-theme="light"][data-hat="lime"] {
  --accent: #c9f22e;
  --accent-ink: #10130a;
  --accent-text: #4f7000;
  --accent-soft: rgba(160, 208, 20, 0.18);
}
:root[data-theme="light"] [data-hat="mint"],
:root[data-theme="light"][data-hat="mint"] {
  --accent: #09ce6b;
  --accent-ink: #08170f;
  --accent-text: #038645;
  --accent-soft: rgba(9, 206, 107, 0.18);
}
:root[data-theme="light"] [data-hat="cyan"],
:root[data-theme="light"][data-hat="cyan"] {
  --accent: #09bdce;
  --accent-ink: #081617;
  --accent-text: #04808b;
  --accent-soft: rgba(9, 189, 206, 0.18);
}
:root[data-theme="light"] [data-hat="electric"],
:root[data-theme="light"][data-hat="electric"] {
  --accent: #54a0f8;
  --accent-ink: #080f17;
  --accent-text: #066ee5;
  --accent-soft: rgba(84, 160, 248, 0.18);
}
:root[data-theme="light"] [data-hat="violet"],
:root[data-theme="light"][data-hat="violet"] {
  --accent: #b085fa;
  --accent-ink: #0d0817;
  --accent-text: #8642fa;
  --accent-soft: rgba(176, 133, 250, 0.18);
}
:root[data-theme="light"] [data-hat="magenta"],
:root[data-theme="light"][data-hat="magenta"] {
  --accent: #f862cb;
  --accent-ink: #170812;
  --accent-text: #d60597;
  --accent-soft: rgba(248, 98, 203, 0.18);
}
:root[data-theme="light"] [data-hat="coral"],
:root[data-theme="light"][data-hat="coral"] {
  --accent: #f87662;
  --accent-ink: #170a08;
  --accent-text: #e02306;
  --accent-soft: rgba(248, 118, 98, 0.18);
}
:root[data-theme="light"] [data-hat="amber"],
:root[data-theme="light"][data-hat="amber"] {
  --accent: #d39609;
  --accent-ink: #171208;
  --accent-text: #956a04;
  --accent-soft: rgba(211, 150, 9, 0.18);
}

/* An explicit dark choice beats the OS, for hats as for everything else. */
:root[data-theme="dark"] [data-hat="lime"],
:root[data-theme="dark"][data-hat="lime"] {
  --accent: #d4ff3f;
  --accent-ink: #0b0d05;
  --accent-text: #c3ee2e;
  --accent-soft: rgba(212, 255, 63, 0.14);
}
:root[data-theme="dark"] [data-hat="mint"],
:root[data-theme="dark"][data-hat="mint"] {
  --accent: #00e673;
  --accent-ink: #06140d;
  --accent-text: #0ab861;
  --accent-soft: rgba(0, 230, 115, 0.14);
}
:root[data-theme="dark"] [data-hat="cyan"],
:root[data-theme="dark"][data-hat="cyan"] {
  --accent: #00d2e6;
  --accent-ink: #061314;
  --accent-text: #0aaab8;
  --accent-soft: rgba(0, 210, 230, 0.14);
}
:root[data-theme="dark"] [data-hat="electric"],
:root[data-theme="dark"][data-hat="electric"] {
  --accent: #479dff;
  --accent-ink: #060c14;
  --accent-text: #0c75ed;
  --accent-soft: rgba(71, 157, 255, 0.14);
}
:root[data-theme="dark"] [data-hat="violet"],
:root[data-theme="dark"][data-hat="violet"] {
  --accent: #b185ff;
  --accent-ink: #0b0614;
  --accent-text: #9055f6;
  --accent-soft: rgba(177, 133, 255, 0.14);
}
:root[data-theme="dark"] [data-hat="magenta"],
:root[data-theme="dark"][data-hat="magenta"] {
  --accent: #ff57cd;
  --accent-ink: #140610;
  --accent-text: #e40ca3;
  --accent-soft: rgba(255, 87, 205, 0.14);
}
:root[data-theme="dark"] [data-hat="coral"],
:root[data-theme="dark"][data-hat="coral"] {
  --accent: #ff6d57;
  --accent-ink: #140806;
  --accent-text: #e92a0c;
  --accent-soft: rgba(255, 109, 87, 0.14);
}
:root[data-theme="dark"] [data-hat="amber"],
:root[data-theme="dark"][data-hat="amber"] {
  --accent: #e6a100;
  --accent-ink: #141006;
  --accent-text: #b8840a;
  --accent-soft: rgba(230, 161, 0, 0.14);
}