/*
 * TRG dark theme — usage token mappings for dark mode.
 *
 * Loaded via <link> in both the React app and the styleguide. Only one
 * theme file is active at a time — the other has `disabled` set on its
 * <link> element. The palette (layer 1) lives in core.css; this file
 * re-points the semantic usage tokens at palette values suitable for a
 * dark canvas.
 */

:root {
  color-scheme: dark;

  /* Backgrounds */
  --bg-page: var(--color-black);
  --bg-surface: var(--color-near-black);
  --bg-elevated: var(--color-charcoal);
  --bg-emphasis: var(--color-white);

  /* Foregrounds — dimmest → brightest. --fg-subtle lifted from smoke to fog
     so captions/timestamps/empty-states clear AA (≈4.6:1 on the page);
     stays below --fg-muted (ash, ≈5.9:1) so the tiers don't collapse. */
  --fg-subtle: var(--color-fog);
  --fg-muted: var(--color-ash);
  --fg-default: var(--color-pearl);
  --fg-emphasis: var(--color-white);
  --fg-on-emphasis: var(--color-black);

  /* Scrim — translucent dark wash for legible text over an arbitrary image
     (card image name band, and available for any image overlay). Constant
     across themes: it sits over the image, not the app canvas, so it must
     not flip with the theme. */
  --bg-scrim: rgba(0, 0, 0, 0.55);
  --fg-on-scrim: var(--color-white);

  /* Borders — default → strong → emphasis. --border-default lifted from iron
     to onyx so structural boundaries read; stays below --border-strong
     (gunmetal). */
  --border-default: var(--color-onyx);
  --border-strong: var(--color-gunmetal);
  --border-emphasis: var(--color-white);

  /* Link underline — muted (not subtle) so the affordance clears the 3:1
     non-text-indicator threshold. */
  --link-underline: var(--fg-muted);

  /* Danger intent (red) */
  --danger-fg: var(--color-red);
  --danger-border: var(--color-red-border);
  --danger-bg: var(--color-red-dim);
  --danger-emphasis: var(--color-red);

  /* Success intent (green) */
  --success-fg: var(--color-green);
  --success-border: var(--color-green-border);
  --success-bg: var(--color-green-dim);
  --success-emphasis: var(--color-green);

  /* Warning intent (amber) */
  --warning-fg: var(--color-amber);
  --warning-border: var(--color-amber-border);
  --warning-bg: var(--color-amber-dim);
  --warning-emphasis: var(--color-amber);

  /* Admin mode accent (teal) */
  --admin-fg: var(--color-admin);
  --admin-border: var(--color-admin-border);
  --admin-bg: var(--color-admin-dim);
  --admin-emphasis: var(--color-admin);

  /* Dev mode accent (violet) */
  --dev-fg: var(--color-dev);
  --dev-border: var(--color-dev-border);
  --dev-bg: var(--color-dev-dim);
  --dev-emphasis: var(--color-dev);

  /* Onboarding role accent (sky) */
  --onboarding-fg: var(--color-onboarding);
  --onboarding-border: var(--color-onboarding-border);
  --onboarding-bg: var(--color-onboarding-dim);
  --onboarding-emphasis: var(--color-onboarding);

  /* Skeleton — bg sits one step above page; shimmer is one step lighter
     than bg so the band reads as a highlight passing across the surface. */
  --skeleton-bg: var(--color-charcoal);
  --skeleton-shimmer: var(--color-graphite);
}