/* Hallmark · genre: atmospheric · theme: custom (vibe: "dark console · phosphor-mint signal · cool graphite")
 * axes: dark / grotesk-sans / chromatic-other (mint 160°) · design-system: design.md · designed-as-app
 * Served at /ui/tokens.css — the single source of truth for every rust-pds
 * browser surface (OAuth authorization screens, account dashboard).
 * Every colour and font in ui.css references a token declared here; no
 * raw values downstream. Dark is the brand; light is derived, never the
 * reverse (same hue anchor, only lightness and chroma move). */

:root {
  color-scheme: dark light;

  /* ---- surfaces & ink (dark, the default) ------------------------- */
  --color-paper:       oklch(13% 0.012 195);
  --color-paper-2:     oklch(17% 0.014 195);
  --color-paper-3:     oklch(21% 0.016 195);
  --color-rule:        oklch(28% 0.014 195);
  --color-rule-2:      oklch(38% 0.014 195);
  --color-muted:       oklch(66% 0.014 195);
  --color-neutral:     oklch(76% 0.012 195);
  --color-ink-2:       oklch(85% 0.010 195);
  --color-ink:         oklch(95% 0.008 195);

  /* ---- the one accent: phosphor mint ------------------------------- */
  --color-accent:      oklch(82% 0.160 160);
  --color-accent-2:    oklch(88% 0.140 160);   /* hover lift of the accent fill */
  --color-accent-ink:  oklch(14% 0.030 160);   /* text on an accent fill */
  --color-focus:       oklch(82% 0.160 160);
  --color-error:       oklch(74% 0.160 25);
  --color-error-ink:   oklch(14% 0.030 25);

  /* overlay-only alphas (modifiers, not palette entries) */
  --color-bloom-1:     oklch(82% 0.160 160 / 0.16);
  --color-bloom-2:     oklch(70% 0.090 230 / 0.12);
  --color-glow:        oklch(82% 0.160 160 / 0.45);
  --color-scrim:       oklch(13% 0.012 195 / 0.72);

  /* ---- chart series (dataviz reference palette, slots 1-3, validated
     all-pairs against paper-2 in each scheme; text never wears them) -- */
  --color-series-1:    #3987e5;
  --color-series-2:    #d95926;
  --color-series-3:    #199e70;

  /* ---- type ---------------------------------------------------------- */
  --font-display: "Space Grotesk", "Space Grotesk Fallback", "Hiragino Sans",
                  "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Meiryo",
                  ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", "Geist Fallback", "Hiragino Sans", "Noto Sans JP",
                  "Noto Sans CJK JP", "Yu Gothic UI", "Meiryo",
                  ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas,
                  "Noto Sans Mono CJK JP", monospace;

  --weight-body:      350;   /* light-on-dark reads heavier; 400 in light mode */
  --weight-strong:    500;
  --weight-display:   700;
  --tracking-display: -0.03em;
  --tracking-label:   0.08em;

  /* 1.25 major-third scale from a 16 px body */
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.953rem;
  --text-2xl:       2.441rem;
  --text-display-s: clamp(1.75rem, 1.25rem + 1.8vw, 2.441rem);
  --text-display:   clamp(2.25rem, 1.5rem + 2.6vw, 3.4rem);

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.55;

  /* ---- space: 4-pt scale, named by role --------------------------- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --control-h:   2.75rem;   /* 44 px — inputs and buttons share one height */

  /* ---- shape ---------------------------------------------------------- */
  --rule-hair:    1px;
  --radius-input: 6px;
  --radius-card:  10px;
  --radius-pill:  999px;

  /* ---- motion (Midnight-class: 0.9× of the canon) ------------------ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   100ms;
  --dur-short:   200ms;
  --dur-long:    380ms;

  /* ---- z ---------------------------------------------------------------- */
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200;
  --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
}

/* ---- light scheme: follows the OS, or an explicit data-theme ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-paper:      oklch(97% 0.006 195);
    --color-paper-2:    oklch(94% 0.008 195);
    --color-paper-3:    oklch(90% 0.010 195);
    --color-rule:       oklch(86% 0.010 195);
    --color-rule-2:     oklch(74% 0.012 195);
    --color-muted:      oklch(42% 0.016 195);
    --color-neutral:    oklch(36% 0.014 195);
    --color-ink-2:      oklch(30% 0.014 195);
    --color-ink:        oklch(16% 0.014 200);
    --color-accent:     oklch(46% 0.140 160);
    --color-accent-2:   oklch(41% 0.140 160);
    --color-accent-ink: oklch(98% 0.010 160);
    --color-focus:      oklch(46% 0.140 160);
    --color-error:      oklch(50% 0.190 25);
    --color-error-ink:  oklch(98% 0.010 25);
    --color-bloom-1:    oklch(60% 0.140 160 / 0.14);
    --color-bloom-2:    oklch(70% 0.090 230 / 0.10);
    --color-glow:       oklch(46% 0.140 160 / 0.25);
    --color-scrim:      oklch(97% 0.006 195 / 0.72);
  --color-series-1:   #2a78d6;
  --color-series-2:   #eb6834;
  --color-series-3:   #1baf7a;
    --color-series-1:   #2a78d6;
    --color-series-2:   #eb6834;
    --color-series-3:   #1baf7a;
    --weight-body:      400;
  }
}
:root[data-theme="light"] {
  --color-paper:      oklch(97% 0.006 195);
  --color-paper-2:    oklch(94% 0.008 195);
  --color-paper-3:    oklch(90% 0.010 195);
  --color-rule:       oklch(86% 0.010 195);
  --color-rule-2:     oklch(74% 0.012 195);
  --color-muted:      oklch(42% 0.016 195);
  --color-neutral:    oklch(36% 0.014 195);
  --color-ink-2:      oklch(30% 0.014 195);
  --color-ink:        oklch(16% 0.014 200);
  --color-accent:     oklch(46% 0.140 160);
  --color-accent-2:   oklch(41% 0.140 160);
  --color-accent-ink: oklch(98% 0.010 160);
  --color-focus:      oklch(46% 0.140 160);
  --color-error:      oklch(50% 0.190 25);
  --color-error-ink:  oklch(98% 0.010 25);
  --color-bloom-1:    oklch(60% 0.140 160 / 0.14);
  --color-bloom-2:    oklch(70% 0.090 230 / 0.10);
  --color-glow:       oklch(46% 0.140 160 / 0.25);
  --color-scrim:      oklch(97% 0.006 195 / 0.72);
  --weight-body:      400;
}