/* ==========================================================================
   Asterloom — Design tokens
   A calm "parchment + constellation" atmosphere: warm aged paper for the
   reading surface, deep night-sky panels for navigation and the star graph,
   and a single gilded gold accent tying everything together.
   ========================================================================== */

:root {
  /* Parchment (reading surface) */
  --parchment:        #f4ead1;
  --parchment-raised: #f8f1de;
  --parchment-sunk:   #ecdfbf;
  --parchment-edge:   #ddcaa0;

  /* Ink (text on parchment) */
  --ink:        #33281a;
  --ink-soft:   #5c4c37;
  --ink-faint:  #8b7a60;
  --ink-ghost:  #bdac8c;

  /* Night sky (chrome / constellation canvas) */
  --night:        #171d33;
  --night-raised: #212a49;
  --night-soft:   #2c375c;
  --night-line:   #3a4670;
  --night-text:   #e7e2d0;
  --night-text-soft: #b9c0d8;

  /* Gilded gold accent */
  --gold:        #c39b43;
  --gold-bright: #e7c974;
  --gold-deep:   #9a7a2f;
  --gold-glow:   rgba(199, 162, 75, 0.35);

  /* Voice accents for the reading surface */
  --user-accent:  #b0653a;   /* the protagonist / user dialogue */
  --user-tint:    rgba(176, 101, 58, 0.10);
  --ai-accent:    #4a6394;   /* AI-portrayed dialogue */
  --ai-tint:      rgba(74, 99, 148, 0.10);
  --quote-accent: #8a6a2f;   /* highlighted quoted speech */

  /* --- Mode identities -------------------------------------------------
     Two constellation-consistent sub-themes so the interface itself tells
     you which generation mode you're in. Roleplay = cool amethyst nebula
     (two voices under starlight); Novel = warm candlelit amber manuscript. */
  --rp-accent:  #7b6cd0;  --rp-strong: #6553bf;  --rp-bright: #b6a8ff;  --rp-deep: #574a94;
  --rp-glow:    rgba(123, 108, 208, 0.32);
  --rp-tint:    rgba(123, 108, 208, 0.09);
  --rp-edge:    rgba(123, 108, 208, 0.34);

  --novel-accent: #c17d2b; --novel-strong: #a5661d; --novel-bright: #e9b45f; --novel-deep: #6f4a1c;
  --novel-glow:   rgba(193, 125, 43, 0.32);
  --novel-tint:   rgba(193, 125, 43, 0.08);
  --novel-edge:   rgba(193, 125, 43, 0.34);

  /* Active mode (defaults to the gilded gold before a mode is applied) */
  --mode-accent: var(--gold);
  --mode-strong: var(--gold-deep);
  --mode-bright: var(--gold-bright);
  --mode-deep:   var(--gold-deep);
  --mode-glow:   var(--gold-glow);
  --mode-tint:   rgba(199, 162, 75, 0.06);
  --mode-edge:   var(--parchment-edge);

  /* Semantic */
  --danger:      #a8402f;
  --danger-soft: rgba(168, 64, 47, 0.12);
  --success:     #4f7a45;
  --warning:     #b3812a;

  /* Typography */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Story reading size (overridden by Settings / prefs.js) */
  --story-prose-size: 18px;
  --story-prose-leading: 1.72;

  /* Elevation & shape */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(51, 40, 26, 0.12);
  --shadow:    0 8px 24px rgba(51, 40, 26, 0.16);
  --shadow-lg: 0 24px 60px rgba(23, 29, 51, 0.35);
  --shadow-night: 0 12px 40px rgba(9, 12, 24, 0.5);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  220ms;

  /* Layout metrics */
  --rail-w:   288px;
  --panel-w:  380px;
  --topbar-h: 64px;
}

/* Chinese UI: Noto for CJK glyphs, Latin faces first so ASCII/punctuation
   (especially ') keep proportional Western metrics instead of em-square width. */
html[lang="zh-CN"] {
  --font-display: "Cormorant Garamond", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-body:    "Spectral", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-ui:      "Inter", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* Resolve the active mode variables from the studio root's data-mode */
[data-mode="roleplay"] {
  --mode-accent: var(--rp-accent);
  --mode-strong: var(--rp-strong);
  --mode-bright: var(--rp-bright);
  --mode-deep:   var(--rp-deep);
  --mode-glow:   var(--rp-glow);
  --mode-tint:   var(--rp-tint);
  --mode-edge:   var(--rp-edge);
}
[data-mode="novel"] {
  --mode-accent: var(--novel-accent);
  --mode-strong: var(--novel-strong);
  --mode-bright: var(--novel-bright);
  --mode-deep:   var(--novel-deep);
  --mode-glow:   var(--novel-glow);
  --mode-tint:   var(--novel-tint);
  --mode-edge:   var(--novel-edge);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}