/* Design tokens — single source of truth for colors, fonts, spacing, motion.
   Kept synchronized with Reverie (kaleidoscope-data-migration/reverie.css:1-64). */

:root {
  /* Base palette (Reverie) */
  --night:      #1c1a17;
  --ink:        #181714;
  --paper:      #f4f0e8;
  --paper-soft: #ebe5da;
  --gold:       #c8a96e;

  /* Fonts */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;
  /* Active dialog only: bubble + textarea. Native OS UI font for an
     IWB-style lighter render than DM Sans. Scoped to the chat surface;
     the rest of the app stays on --font-ui. */
  --font-bubble:  system-ui, -apple-system, sans-serif;

  /* Motion — three timings only */
  --t-fast:   0.15s ease;
  --t-normal: 0.3s ease;
  --t-slow:   0.8s ease;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
}

/* Theme: Light (default) */
:root,
body.light {
  --bg:            var(--paper);
  --bg-surface:    var(--paper-soft);
  /* 1:1 Reverie reverie.css:70 */
  --bg-overlay:    rgba(0, 0, 0, 0.15);

  /* 1:1 Reverie reverie.css:71-74 */
  --fg-strong:     rgba(24, 23, 20, 0.9);
  --fg:            rgba(24, 23, 20, 0.75);
  --fg-dim:        rgba(24, 23, 20, 0.45);
  --fg-muted:      rgba(24, 23, 20, 0.2);
  --fg-faint:      rgba(24, 23, 20, 0.1);

  /* Maximum-contrast colour for hover-revealed elements (e.g. home
     crease-echos). Light mode: pure ink. Dark mode override below. */
  --line-hover-color: #181714;

  --border:        rgba(30, 22, 12, 0.15);
  --border-strong: rgba(30, 22, 12, 0.25);
  --border-soft:   rgba(30, 22, 12, 0.08);

  /* Control tokens (1:1 Reverie: reverie.css:77-80) */
  --control-bg:     rgba(30, 22, 12, 0.06);
  --control-hover:  rgba(30, 22, 12, 0.10);
  --control-active: rgba(30, 22, 12, 0.18);
  --control-border: rgba(30, 22, 12, 0.15);

  --gold-dim:      rgba(155, 128, 70, 0.45);
  --gold-faint:    rgba(200, 169, 110, 0.12);

  /* Opaque equivalent of gold-faint over bg-surface — used where the
     subtle gold tint must NOT be transparent (e.g. dialog input wrap,
     so the accent stripe doesn't shine through during its slide). */
  --input-bg:      #e7decd;

  --bubble-border: rgba(30, 22, 12, 0.12);

  color-scheme: light;
}

/* Theme: Dark (opt-in) */
body.dark {
  --bg:            var(--night);
  --bg-surface:    var(--ink);
  /* 1:1 Reverie reverie.css:26 */
  --bg-overlay:    rgba(0, 0, 0, 0.3);

  /* 1:1 Reverie reverie.css:27-30 */
  --fg-strong:     rgba(255, 255, 255, 0.9);
  --fg:            rgba(255, 255, 255, 0.75);
  --fg-dim:        rgba(255, 255, 255, 0.45);
  --fg-muted:      rgba(255, 255, 255, 0.25);
  --fg-faint:      rgba(255, 255, 255, 0.1);

  /* Dark mode hover-revealed colour: pure white for max contrast
     against the ink background. */
  --line-hover-color: #ffffff;

  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.25);
  --border-soft:   rgba(255, 255, 255, 0.06);

  /* Control tokens (1:1 Reverie: reverie.css:33-36) */
  --control-bg:     rgba(255, 255, 255, 0.08);
  --control-hover:  rgba(255, 255, 255, 0.14);
  --control-active: rgba(255, 255, 255, 0.22);
  --control-border: rgba(255, 255, 255, 0.15);

  --gold-dim:      rgba(200, 169, 110, 0.35);
  --gold-faint:    rgba(200, 169, 110, 0.08);

  /* Opaque equivalent of gold-faint over bg-surface — see light theme. */
  --input-bg:      #26231b;

  --bubble-border: rgba(255, 255, 255, 0.08);

  color-scheme: dark;
}