:root {
  /* ─── Brand constants (don't change between themes) ─── */
  --accent: #F8623B;
  --accent-hover: #e85028;
  --accent-soft: rgba(248, 98, 59, 0.12);

  --trina-primary: #F8623B;
  --trina-soft: rgba(248, 98, 59, 0.15);
  --sue-primary: #D4A017;
  --sue-soft: rgba(212, 160, 23, 0.15);

  --success: #4ade80;

  --radius: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --serif: 'Bona Nova', 'Playfair Display', Georgia, serif;
  --sans: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── Dark theme (default) ─── */
:root,
:root[data-theme="dark"] {
  --bg-deep: #000000;
  --bg-surface: #0a0a0a;
  --bg-card: #141414;
  --bg-elevated: #1c1c1c;

  --text: #ffffff;
  --text-dim: #9a9a9a;
  --text-muted: #5c5c5c;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);

  --grid-glow-1: rgba(248, 98, 59, 0.08);
  --grid-glow-2: rgba(212, 160, 23, 0.05);
  --grid-base: #000000;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ─── Light theme ─── */
:root[data-theme="light"] {
  --bg-deep: #f5f1ea;
  --bg-surface: #faf7f1;
  --bg-card: #ffffff;
  --bg-elevated: #f0ece4;

  --text: #1a1410;
  --text-dim: #5a4f45;
  --text-muted: #9a8f80;

  --border: rgba(26, 20, 16, 0.10);
  --border-strong: rgba(26, 20, 16, 0.22);

  --grid-glow-1: rgba(248, 98, 59, 0.06);
  --grid-glow-2: rgba(212, 160, 23, 0.04);
  --grid-base: #f5f1ea;

  --shadow-soft: 0 1px 2px rgba(60, 40, 20, 0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  background: var(--bg-deep);
  color: var(--text);
  min-height: 100vh;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  /* Smooth theme transitions on body and any descendant that uses these tokens */
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Apply soft transitions to themeable elements so the swap doesn't flash */
.sidebar, .chat-area, .character-card, .msg, .input-wrap,
.welcome .hint-card, .chat-header, .input-area, .advisor-group,
.theme-toggle, .source-tag {
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease;
}