/*
 * 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: var(--color-smoke);
  --fg-muted: var(--color-ash);
  --fg-default: var(--color-pearl);
  --fg-emphasis: var(--color-white);
  --fg-on-emphasis: var(--color-black);

  /* Borders — default → strong → emphasis */
  --border-default: var(--color-iron);
  --border-strong: var(--color-gunmetal);
  --border-emphasis: var(--color-white);

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