/* ═════════════════════════════════════════════════════════════════
 * AI DM — Unified Design Tokens
 *
 * Single source of truth for both UIs. Consumed via <link rel="stylesheet">
 * from:
 *   - public/app/index.html    (admin + session-management UI)
 *   - public/index.html         (live-session UI during voice play)
 *   - public/display/index.html (cinematic companion screen — if it needs tokens)
 *
 * Palette rationale:
 *   - Navy surfaces from the admin UI (richer, covers more UI)
 *   - Warmer gold accent from the live-session UI (fantasy tone)
 *   - Per-campaign-type accents layered on top (date-night rose-gold,
 *     kids bright-green, standard default gold)
 *
 * Naming policy:
 *   Both `--fg`/`--text` and `--ok`/`--success` are defined as aliases
 *   so neither UI needed selector-body rewrites. Canonicalize in a future pass.
 * ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────── */
  --bg:              #1a1a2e;
  --bg-panel:        #1a2340;
  --bg-card:         #16213e;
  --bg-card-hover:   #1a2747;
  --bg-input:        #0f1a30;
  --bg-elevated:     #212a4a;

  /* ── Foreground / text ────────────────────────────────────────── */
  --fg:              #f0e6d8;
  --fg-bright:       #f5f0e6;
  --fg-muted:        #9a9488;

  /* Legacy admin names — alias to above so existing selectors keep working */
  --text:            var(--fg);
  --text-bright:     var(--fg-bright);
  --text-dim:        var(--fg-muted);

  /* ── Accent (default = standard campaigns) ───────────────────── */
  --accent:          #d4a55a;
  --accent-dim:      #8a6c3a;
  --accent-glow:     rgba(212, 165, 90, 0.3);

  /* ── Semantic colors ──────────────────────────────────────────── */
  --danger:          #c24a3d;
  --danger-dim:      #a33a2f;
  --ok:              #6ba368;
  --ok-dim:          #4f7d4c;
  --info:            #3498db;

  /* Legacy admin names */
  --success:         var(--ok);
  --success-dim:     var(--ok-dim);

  /* ── Borders ──────────────────────────────────────────────────── */
  --border:          #2a3a5c;
  --border-strong:   #3d4d6c;
  --border-glow:     var(--accent-glow);

  /* ── Radii ────────────────────────────────────────────────────── */
  --radius-sm:       4px;
  --radius:          8px;
  --radius-lg:       12px;
  --radius-xl:       16px;

  /* ── Shadows ──────────────────────────────────────────────────── */
  --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow:          0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg:       0 4px 16px rgba(0, 0, 0, 0.35);

  /* ── Typography ───────────────────────────────────────────────── */
  --font-ui:         'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif:      Georgia, 'Times New Roman', serif;
  --font-char:       var(--font-serif);   /* legacy admin alias */

  /* ── Motion ───────────────────────────────────────────────────── */
  --transition:      0.2s ease;

  /* ── Per-campaign-type accents ───────────────────────────────── */
  --accent-date-night: #d4668c;
  --accent-date-night-dim: #8a3e59;
  --accent-kids:       #5fb878;
  --accent-kids-dim:   #3e8a53;
  --accent-standard:   var(--accent);
  --accent-standard-dim: var(--accent-dim);
}

/* Per-type accent application: any element with a data-campaign-type
 * attribute re-binds --accent to the matching per-type token so that
 * any downstream selectors using var(--accent) automatically recolor. */
[data-campaign-type="date_night"] {
  --accent:     var(--accent-date-night);
  --accent-dim: var(--accent-date-night-dim);
  --accent-glow: rgba(212, 102, 140, 0.3);
}
[data-campaign-type="kids"] {
  --accent:     var(--accent-kids);
  --accent-dim: var(--accent-kids-dim);
  --accent-glow: rgba(95, 184, 120, 0.3);
}
[data-campaign-type="standard"] {
  --accent:     var(--accent-standard);
  --accent-dim: var(--accent-standard-dim);
}