/*
 * Legacy-token bridge.
 *
 * The presentation CSS (and the per-demo demo.css sidecars) reference a small set
 * of generic names (--bg, --fg, --accent, …). The brand visual layer lives in
 * tokens/: colors.css, typography.css, spacing.css. This file maps the generic
 * names onto the semantic tokens so the whole site + every demo re-theme at once,
 * without editing each consumer.
 *
 * Direction of travel: as CSS migrates to reference the semantic tokens directly
 * (--color-text, --surface-card, --border-default, …), the matching alias below
 * can be dropped.
 *
 * NB: --sidebar-width comes from tokens/spacing.css (same 16rem value).
 */

:root {
  /* Surfaces / canvas */
  --bg: var(--surface-page);
  --sidebar-bg: var(--surface-sidebar);

  /* Text */
  --fg: var(--color-text);
  --muted: var(--color-text-muted);

  /* Lines */
  --border: var(--border-default);

  /* Accent — the single legacy accent maps to the brand PRIMARY (vital).
     Ruby is introduced deliberately in component CSS for danger / true accent. */
  --accent: var(--color-primary);
  --accent-rgb: var(--vital-rgb);

  /* Code panels */
  --code-bg: var(--surface-code);
  --code-fg: var(--on-code);

  /* Functional dark shades for status TEXT. The design system ships 500 + 50 for
     leaf / amber / danger; demos also need an accessible dark shade for body text
     on light backgrounds. Danger reuses the ruby ramp; leaf / amber are literals. */
  --danger-700: var(--ruby-700);
  --leaf-700: #15803d;
  --amber-700: #b45309;

  /* Same treatment for the accent. `--accent` is the brand primary (vital-500) and
     does NOT change with the theme, so accent-colored TEXT sits at 2.7–3.0:1 on the
     light canvas — below the 4.5:1 that 14px/600 needs.
     Reuse the vital ramp (as danger reuses ruby): 700 measures 5.6–6.1:1 on the light
     surfaces in use, while 600 only reaches 4.1–4.3 and would still fail.
     Use this for accent TEXT; `--accent` stays correct for backgrounds, borders and
     outlines, where the contrast requirement is different (or none). */
  --accent-700: var(--vital-700);
  /* The FILL counterpart. `--accent-700` above is a TEXT shade and flips to
     vital-500 on the dark canvas (correct for text there, 6.30:1) — which makes it
     wrong behind white, where vital-500 measures 2.99:1. A filled control whose
     label is white needs a dark fill in BOTH themes, so this one does not flip:
     white over vital-700 is 6.14:1 either way. Use it for filled controls;
     `--accent-700` stays correct for accent text. */
  --accent-fill: var(--vital-700);
  /* The hover/emphasis step of the same pair. `--color-primary-hover` is vital-600,
     which measures 4.1–4.3 on the light canvas — under the floor — so link hover
     needs this darker step instead. */
  --accent-800: var(--vital-800);
}

/* Dark-theme overrides for the functional status TEXT shades. The light values
   above are tuned for light backgrounds; brighten them so status text stays
   legible on the dark canvas. Declared here — after the :root that defines them —
   so it wins the cascade (same specificity, later wins). */
[data-theme="dark"] {
  --leaf-700: #4ade80;
  --amber-700: #fbbf24;
  --danger-700: #f87171;
  /* vital-700 is too dark for the dark canvas (3.07:1); the brand 500 that fails on
     light is exactly right here (6.30:1). */
  --accent-700: var(--vital-500);
  --accent-800: var(--vital-400);
}