/* ============================================================================
   Semantic tokens
   ----------------------------------------------------------------------------
   Composition layer between palette.css + constants/ + theme-extensions/ and
   the rest of the CSS. These tokens express *roles* (primary, danger,
   surface, etc.) by referencing raw colors from palette.css and raw
   dimensions from constants/. They are the only tokens the rest of the CSS
   should consume directly.

   Adding a new semantic color role:
     1. Add the raw value to palette.css with a sensible family name.
     2. Add the --role alias here that points at the palette color.
     3. Components consume var(--role).
   ============================================================================ */

:root {
  /* ─── Brand ─────────────────────────────────────────────────────────────── */
  --primary: var(--color-moss);
  --primary-light: var(--color-moss-light);
  --primary-dark: var(--color-moss-dark);
  --primary-08: var(--color-moss-08);
  --primary-10: var(--color-moss-10);
  --primary-15: var(--color-moss-15);
  --primary-18: var(--color-moss-18);
  --primary-25: var(--color-moss-25);

  --secondary: var(--color-wheat);
  --secondary-06: var(--color-wheat-06);

  /* ─── Surfaces ──────────────────────────────────────────────────────────── */
  --bg-page: var(--color-stone-50);
  --surface: var(--color-surface);
  --surface-raised: var(--color-stone-100);
  --bg-elevated: var(--color-stone-100);

  --border: var(--color-stone-300);
  --border-light: var(--color-stone-200);

  /* ─── Text ──────────────────────────────────────────────────────────────── */
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-700);
  --text-muted: var(--color-ink-500);
  --text-on-primary: var(--color-white-on-primary);

  /* ─── Status ────────────────────────────────────────────────────────────── */
  --danger: var(--color-crimson);
  --danger-light: var(--color-crimson-light);
  --danger-10: var(--color-crimson-10);
  --danger-15: var(--color-crimson-15);
  --success: var(--color-forest);
  --warning: var(--color-amber);
  --warning-70: var(--color-amber-70);
  --warning-bg: var(--color-amber-light);

  --neutral-bg: var(--color-frost-50);
  --neutral-fg: var(--color-frost-700);

  /* ─── Form input ────────────────────────────────────────────────────────── */
  --input-bg: var(--surface-raised);

  /* ─── Translucent overlays ────────────────────────────────────────────────
     Light-mode defaults are transparent so dark-mode overrides can swap in
     actual values without breaking light. Each light token has a dark twin
     defined under [data-theme="dark"] below. */
  --white-08: rgba(255, 255, 255, 0);
  --white-80: rgba(255, 255, 255, 0);
  --white-90: rgba(255, 255, 255, 0);
  --white-92: rgba(255, 255, 255, 0);
  --white-96: rgba(255, 255, 255, 0);

  --topbar-bg-light: rgba(255, 255, 255, 0.8);
  --topbar-bg-dark: rgba(255, 255, 255, 0);

  --surface-dark-70: rgba(28, 33, 44, 0);
  --surface-dark-96: rgba(28, 33, 44, 0);
  --surface-elevated-100: rgba(45, 51, 67, 0);
  --surface-elevated-96: rgba(45, 51, 67, 0);

  --page-overlay-06: rgba(15, 23, 42, 0);
  --page-overlay-80: rgba(15, 20, 25, 0);
  --neutral-overlay-35: rgba(150, 150, 150, 0);

  /* ─── Transitions ────────────────────────────────────────────────────────── */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-transform: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] {
  /* ─── Input surface switches to base surface in dark mode ───────────────── */
  --input-bg: var(--surface);

  /* ─── Overlay tokens (dark = subtle white / dark surfaces) ─────────────── */
  --white-08: rgba(255, 255, 255, 0.08);
  --white-80: rgba(255, 255, 255, 0.80);
  --white-90: rgba(255, 255, 255, 0.90);
  --white-92: rgba(255, 255, 255, 0.92);
  --white-96: rgba(255, 255, 255, 0.96);

  --topbar-bg-light: rgba(255, 255, 255, 0);
  --topbar-bg-dark: rgba(15, 20, 25, 0.8);

  --surface-dark-70: rgba(28, 33, 44, 0.70);
  --surface-dark-96: rgba(28, 33, 44, 0.96);
  --surface-elevated-100: rgba(45, 51, 67, 1);
  --surface-elevated-96: rgba(45, 51, 67, 0.96);

  --page-overlay-06: rgba(15, 23, 42, 0.06);
  --page-overlay-80: rgba(15, 20, 25, 0.80);
  --neutral-overlay-35: rgba(150, 150, 150, 0.35);
}