/*
 * Legacy-token bridge.
 *
 * The playground's presentation CSS (and the per-demo demo.css sidecars) were
 * written against a small set of generic names (--bg, --fg, --accent, …). The
 * brand visual layer now lives in tokens/ (vendored from docs/design-system):
 * colors.css, typography.css, spacing.css. This file maps the legacy names onto
 * the new 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. Until then this shim keeps the cascade intact.
 *
 * NB: --sidebar-width now 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;
}

/* 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;
}