/* ==========================================================================
   FERNGLAS — SEMANTIC TOKENS. The layer components consume. Single
   definition per token using light-dark(); dark mode is NOT a duplicated
   block. `data-theme="light"|"dark"` on <html> forces a scheme; its absence
   means "follow the OS" via `color-scheme: light dark`.

   BRANDING A PROJECT: override just --accent-base-light/dark (see
   bottom of this file for the neutral default) — every other accent token
   (--accent-hover, --accent-soft, --on-accent, --btn-primary-bg)
   derives from that one pair via color-mix(), so branding a new project is
   a two-line change, not a token-by-token repaint. See README.md.
   ========================================================================== */
:root {
  color-scheme: light dark;
}
:root[data-theme='light'] {
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
}

:root {
  /* -- Surfaces -- */
  --bg: light-dark(var(--color-gray-50), var(--color-gray-950));
  --surface: light-dark(var(--color-gray-0), var(--color-gray-900));
  --surface-raised: light-dark(var(--color-gray-0), var(--color-gray-800));
  --surface-sunken: light-dark(var(--color-gray-100), var(--color-gray-950));

  /* -- Borders -- */
  --border: light-dark(var(--color-gray-200), var(--color-gray-700));
  --border-strong: light-dark(var(--color-gray-300), var(--color-gray-600));

  /* -- Text -- */
  --text: light-dark(var(--color-gray-900), var(--color-gray-50));
  --text-muted: light-dark(var(--color-gray-600), var(--color-gray-400));
  /* Decorative-only — measures ~2.5-2.7:1 against --bg/--surface,
     under WCAG AA. Reserved for things that carry no information on their
     own (a divider label, watermark text). Never use for real content or
     icon-only interactive elements — use --text-muted (6.3:1+) instead. */
  --text-faint: light-dark(var(--color-gray-400), var(--color-gray-600));
  --link: light-dark(var(--color-blue-600), #7db8ee);

  /* -- Accent — NEUTRAL DEFAULT (a muted blue). A consuming project
     overrides just this one pair to brand itself; see bottom of file. -- */
  --accent-base-light: #1a5fb4;
  --accent-base-dark: #7ab0e8;
  --accent: light-dark(var(--accent-base-light), var(--accent-base-dark));
  --accent-hover: light-dark(
    color-mix(in srgb, var(--accent) 85%, black),
    color-mix(in srgb, var(--accent) 88%, white)
  );
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --btn-primary-bg: var(--accent);
  --btn-primary-hover: var(--accent-hover);
  /* Pick --accent-base-light dark/saturated enough for white text, and
     --accent-base-dark light/saturated enough for near-black text — this
     one rule then holds for every accent a project chooses. */
  --on-accent: light-dark(#ffffff, #14141a);
  --focus-ring: 2px solid var(--accent);

  /* -- Feedback (correctness, alerts) — deliberately independent of accent
     so a red- or green-leaning accent color never gets confused with a
     success/error state -- */
  --ok: light-dark(var(--color-green-700), #6fd99a);
  --ok-bg: light-dark(var(--color-green-100), color-mix(in srgb, var(--color-green-700) 30%, var(--color-gray-950)));
  --ok-border: light-dark(var(--color-green-600), var(--color-green-700));
  /* Every filled-button hover in this file darkens toward black in light
     mode and lightens toward white in dark mode (see --accent-hover) —
     moves away from the page background either way. --ok-hover/--err-hover
     follow that same rule; --ok-border/--err-border stay border-only
     tokens (alerts, badges, input outlines), not hover fills. */
  --ok-hover: light-dark(
    color-mix(in srgb, var(--ok) 85%, black),
    color-mix(in srgb, var(--ok) 88%, white)
  );

  --err: light-dark(var(--color-rose-700), #f29aa3);
  --err-bg: light-dark(var(--color-rose-100), color-mix(in srgb, var(--color-rose-700) 30%, var(--color-gray-950)));
  --err-border: light-dark(var(--color-rose-600), var(--color-rose-700));
  --err-hover: light-dark(
    color-mix(in srgb, var(--err) 85%, black),
    color-mix(in srgb, var(--err) 88%, white)
  );

  --warn: light-dark(var(--color-amber-600), #e0bd6b);
  --warn-bg: light-dark(var(--color-amber-100), color-mix(in srgb, var(--color-amber-600) 30%, var(--color-gray-950)));

  --info: light-dark(var(--color-blue-600), #7db8ee);
  --info-bg: light-dark(var(--color-blue-100), color-mix(in srgb, var(--color-blue-600) 30%, var(--color-gray-950)));
  /* Was color-mix(…, white) in BOTH branches — info lightened on hover in
     light mode while every other filled button (primary/navy/ruby/gold)
     darkened. Light-mode branch corrected to match. */
  --info-hover: light-dark(
    color-mix(in srgb, var(--info) 85%, black),
    color-mix(in srgb, var(--info) 88%, white)
  );

  /* -- Extra brand-accent roles (navy/ruby/gold) — same light-mode-darkens
     / dark-mode-lightens pairing every filled-button color above uses, so
     each stays legible against --on-accent text in both schemes, not
     just light mode. Independent of --accent and the feedback roles
     above, same reasoning as those: picking one for a button should never
     read as "this is the brand color" or "this is a correctness state".

     The previous dark-mode values (#9dc2f0, #e0919c, #e6c667) were picked
     without checking them against their neighbors: at matching lightness
     they landed on nearly the same hue as --info/--err/--warn (~10-15
     units apart in sRGB, functionally identical at a glance), so navy vs.
     info, ruby vs. danger, and gold vs. warning all read as the same
     button color in dark mode despite being distinct in light mode. Fixed
     by pushing each hue further from its sibling (navy toward indigo,
     ruby toward magenta, gold toward mustard-yellow) while re-checking
     contrast against --on-accent's dark value (#14141a) stays >= 4.5:1. -- */
  --navy: light-dark(var(--color-navy-600), #6684f0);
  --navy-hover: light-dark(
    color-mix(in srgb, var(--navy) 85%, black),
    color-mix(in srgb, var(--navy) 88%, white)
  );
  --ruby: light-dark(var(--color-ruby-600), #e6658c);
  --ruby-hover: light-dark(
    color-mix(in srgb, var(--ruby) 85%, black),
    color-mix(in srgb, var(--ruby) 88%, white)
  );
  --gold: light-dark(var(--color-gold-600), #e9cb35);
  --gold-hover: light-dark(
    color-mix(in srgb, var(--gold) 85%, black),
    color-mix(in srgb, var(--gold) 88%, white)
  );

  /* -- Data-viz categorical — semantic pairing of tokens.css's validated
     8-slot palette via light-dark(), same derivation pattern as every
     other token in this file. Consume in fixed slot order (--dataviz-1
     first, etc.); see tokens.css's comment for why the order itself is
     the colorblind-safety mechanism. -- */
  --dataviz-1: light-dark(var(--dataviz-color-blue-light), var(--dataviz-color-blue-dark));
  --dataviz-2: light-dark(var(--dataviz-color-orange-light), var(--dataviz-color-orange-dark));
  --dataviz-3: light-dark(var(--dataviz-color-aqua-light), var(--dataviz-color-aqua-dark));
  --dataviz-4: light-dark(var(--dataviz-color-yellow-light), var(--dataviz-color-yellow-dark));
  --dataviz-5: light-dark(var(--dataviz-color-magenta-light), var(--dataviz-color-magenta-dark));
  --dataviz-6: light-dark(var(--dataviz-color-green-light), var(--dataviz-color-green-dark));
  --dataviz-7: light-dark(var(--dataviz-color-violet-light), var(--dataviz-color-violet-dark));
  --dataviz-8: light-dark(var(--dataviz-color-red-light), var(--dataviz-color-red-dark));

  /* -- Shadows: a dark surface already sits on a near-black page background,
     so a *black* shadow has almost no darker range left to read against —
     it was effectively invisible regardless of alpha. A soft light halo is
     what actually separates a raised dark surface from the page behind it,
     which is why the dark branch flips to white instead of just cranking
     up black's opacity. -- */
  --shadow-elevation-1: light-dark(var(--shadow-1), 0 1px 2px rgb(255 255 255 / 0.06));
  --shadow-elevation-2: light-dark(var(--shadow-2), 0 2px 8px rgb(255 255 255 / 0.10));
  --shadow-elevation-3: light-dark(var(--shadow-3), 0 8px 24px rgb(255 255 255 / 0.16));
}