:root {
  /* ── Base Palette ── */
  --nagi-snow-white: #F7F9FC;
  --nagi-mist-blue: #E8EEF6;
  --nagi-soft-glass-white: #FFFFFF;
  --nagi-gray-blue: #AEBAC8;
  --nagi-deep-blue-night: #101827;
  --nagi-ink-navy: #1B2430;
  --nagi-cold-gray: #6E7A89;
  --nagi-silver-blue: #C9D1DC;
  --nagi-weak-text: #C9D1DC;
  --nagi-muted-rose: #C98A96;
  --nagi-rose-gold: #BFA08A;
  --nagi-dried-wine: #7A3F4A;
  --nagi-pale-gold: #D8C38A;
  --nagi-gold: #D7BE86;

  /* ── Typography ── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', Georgia, serif;

  --fs-dialogue: 17px;
  --lh-dialogue: 1.9;
  --fs-narration: 17px;
  --lh-narration: 1.9;
  --fs-choice: 15px;
  --lh-choice: 1.8;
  --fs-speaker: 13px;
  --fs-hud: 13px;
  --fs-prologue: 28px;
  --lh-prologue: 1.68;

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 14px;
  --space-lg: 22px;
  --space-xl: 32px;
  --space-2xl: 42px;

  /* ─ Overlay ── */
  --overlay-bg: rgba(0, 0, 0, 0.40);

  /* ── Cut corners ── */
  --cut-sm: 8px;
  --cut-md: 14px;

  /* ── Cut corner clip-path helpers ── */
  --clip-cut-sm: polygon(
    8px 0, calc(100% - 8px) 0,
    100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%,
    0 calc(100% - 8px), 0 8px
  );
  --clip-cut-md: polygon(
    14px 0, calc(100% - 14px) 0,
    100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%,
    0 calc(100% - 14px), 0 14px
  );

  /* ── Animation ── */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
  --duration-scene: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Authority overlay layers ── */
  --overlay-system-1: linear-gradient(to bottom, rgba(19, 32, 51, 0.52), rgba(19, 32, 51, 0.34) 42%, rgba(19, 32, 51, 0.78));
  --overlay-system-2: radial-gradient(ellipse at 50% 38%, transparent 0 18%, rgba(19, 32, 51, 0.38) 62%, rgba(19, 32, 51, 0.72) 100%);
  --overlay-system-3: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), transparent 18%, transparent 70%, rgba(255, 255, 255, 0.02));
  --overlay-splash-1: linear-gradient(to bottom, rgba(16, 24, 39, 0.04), rgba(16, 24, 39, 0.12) 38%, rgba(16, 24, 39, 0.86) 100%);
  --overlay-splash-2: radial-gradient(ellipse at 46% 34%, transparent 0 22%, rgba(16, 24, 39, 0.34) 72%, rgba(16, 24, 39, 0.7) 100%);
  --overlay-story-1: linear-gradient(to bottom, rgba(19, 32, 51, 0.22), rgba(19, 32, 51, 0.10) 24%, rgba(19, 32, 51, 0.18) 58%, rgba(19, 32, 51, 0.42) 100%);
  --overlay-story-2: linear-gradient(to right, rgba(19, 32, 51, 0.10), transparent 34%, transparent 72%, rgba(19, 32, 51, 0.12));

  /* ── Authority glass tokens ── */
  --glass-panel-bg: linear-gradient(to bottom, rgba(16, 24, 39, 0.34), rgba(16, 24, 39, 0.52));
  --glass-panel-border: rgba(255, 255, 255, 0.10);
  --glass-panel-blur: blur(16px) saturate(0.92);

  /* ── Dialog tokens ── */
  --dialog-card-bg: linear-gradient(to bottom, rgba(27, 36, 54, 0.72), rgba(20, 31, 49, 0.82));
  --dialog-border: rgba(255, 255, 255, 0.08);
  --dialog-scrim: rgba(9, 14, 24, 0.40);
  --dialog-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  --dialog-inner-highlight: linear-gradient(to bottom, rgba(247, 249, 252, 0.05), transparent 36%);

  /* ── Dialogue box tokens (Android TASK-20260723-002: 3-stop top→bottom) ── */
  --dialogue-box-bg: linear-gradient(to top, rgba(16, 24, 39, 0.92) 0%, rgba(16, 24, 39, 0.70) 48%, rgba(16, 24, 39, 0) 100%);
  --dialogue-box-border: rgba(255, 255, 255, 0.08);
  --dialogue-box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

/* ── Game UI color tokens (alpha variants of base palette) ── */

  /* Snow white (247, 249, 252) alpha variants */
  --snow-96: rgba(247, 249, 252, 0.96);
  --snow-94: rgba(247, 249, 252, 0.94);
  --snow-92: rgba(247, 249, 252, 0.92);
  --snow-82: rgba(247, 249, 252, 0.82);
  --snow-78: rgba(247, 249, 252, 0.78);
  --snow-56: rgba(247, 249, 252, 0.56);
  --snow-20: rgba(247, 249, 252, 0.20);
  --snow-12: rgba(247, 249, 252, 0.12);
  --snow-09: rgba(247, 249, 252, 0.09);
  --snow-08: rgba(247, 249, 252, 0.08);
  --snow-04: rgba(247, 249, 252, 0.04);

  /* Parchment (244, 241, 234) alpha variants */
  --parchment-92: rgba(244, 241, 234, 0.92);
  --parchment-90: rgba(244, 241, 234, 0.90);
  --parchment-88: rgba(244, 241, 234, 0.88);
  --parchment-86: rgba(244, 241, 234, 0.86);
  --parchment-84: rgba(244, 241, 234, 0.84);
  --parchment-82: rgba(244, 241, 234, 0.82);
  --parchment-74: rgba(244, 241, 234, 0.74);
  --parchment-70: rgba(244, 241, 234, 0.70);
  --parchment-66: rgba(244, 241, 234, 0.66);
  --parchment-64: rgba(244, 241, 234, 0.64);

  /* Deep blue (16, 24, 39) alpha variants */
  --deep-76: rgba(16, 24, 39, 0.76);
  --deep-72: rgba(16, 24, 39, 0.72);
  --deep-60: rgba(16, 24, 39, 0.60);
  --deep-50: rgba(16, 24, 39, 0.50);
  --deep-48: rgba(16, 24, 39, 0.48);
  --deep-44: rgba(16, 24, 39, 0.44);
  --deep-40: rgba(16, 24, 39, 0.40);
  --deep-34: rgba(16, 24, 39, 0.34);
  --deep-32: rgba(16, 24, 39, 0.32);
  --deep-30: rgba(16, 24, 39, 0.30);
  --deep-18: rgba(16, 24, 39, 0.18);
  --deep-14: rgba(16, 24, 39, 0.14);
  --deep-10: rgba(16, 24, 39, 0.10);
  --deep-0: rgba(16, 24, 39, 0);

  /* HUD blue (15, 24, 39) alpha variants */
  --hud-blue-34: rgba(15, 24, 39, 0.34);
  --hud-blue-30: rgba(15, 24, 39, 0.30);
  --hud-blue-22: rgba(15, 24, 39, 0.22);
  --hud-blue-12: rgba(15, 24, 39, 0.12);

  /* Gold (215, 190, 134) alpha variants */
  --gold-100: rgba(215, 190, 134, 1);
  --gold-74: rgba(215, 190, 134, 0.74);
  --gold-72: rgba(215, 190, 134, 0.72);
  --gold-60: rgba(215, 190, 134, 0.60);
  --gold-28: rgba(215, 190, 134, 0.28);
  --gold-26: rgba(215, 190, 134, 0.26);
  --gold-20: rgba(215, 190, 134, 0.20);
  --gold-18: rgba(215, 190, 134, 0.18);
  --gold-16: rgba(215, 190, 134, 0.16);

  /* Black alpha variants */
  --black-72: rgba(0, 0, 0, 0.72);
  --black-64: rgba(0, 0, 0, 0.64);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-54: rgba(0, 0, 0, 0.54);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-48: rgba(0, 0, 0, 0.48);
  --black-42: rgba(0, 0, 0, 0.42);
  --black-34: rgba(0, 0, 0, 0.34);
  --black-28: rgba(0, 0, 0, 0.28);

  /* White alpha variants */
  --white-30: rgba(255, 255, 255, 0.3);
  --white-28: rgba(255, 255, 255, 0.28);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-10: rgba(255, 255, 255, 0.10);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-07: rgba(255, 255, 255, 0.07);
  --white-045: rgba(255, 255, 255, 0.045);
  --white-04: rgba(255, 255, 255, 0.04);

  /* Ink navy (27, 36, 54) alpha variants */
  --ink-36: rgba(27, 36, 54, 0.36);
  --ink-34: rgba(27, 36, 54, 0.34);
  --ink-24: rgba(27, 36, 54, 0.24);

  /* Gray-blue (174, 186, 200) alpha variants */
  --gray-blue-18: rgba(174, 186, 200, 0.18);
  --gray-blue-12: rgba(174, 186, 200, 0.12);

  /* Misc unique colors */
  --scrim-dark-58: rgba(19, 32, 51, 0.58);
  --ink-shadow-18: rgba(10, 15, 25, 0.18);
  --rose-gold-18: rgba(191, 160, 138, 0.18);
  --ending-normal: rgba(220, 226, 234, 0.78);
  --ending-bad: rgba(151, 178, 215, 0.72);

  /* Mask values (used in -webkit-mask-image) */
  --mask-center: rgba(0,0,0,1);
  --mask-mid: rgba(0,0,0,0.94);
  --mask-edge: rgba(0,0,0,0);

/* ── Dark Theme (default) ── */
[data-theme="dark"] {
  --bg-primary: var(--nagi-deep-blue-night);
  --bg-secondary: var(--nagi-deep-blue-night);
  --text-primary: var(--nagi-snow-white);
  --text-secondary: rgba(232, 238, 246, 0.72);
  --text-weak: #C9D1DC;
  --text-inverse: var(--nagi-ink-navy);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --icon-default: rgba(247, 249, 252, 0.94);
  --accent-primary: var(--nagi-rose-gold);
  --accent-heart: rgba(201, 138, 150, 0.78);
  --danger: var(--nagi-dried-wine);
  --success-special: var(--nagi-gold);

  --glass-bg: rgba(27, 36, 54, 0.26);
  --glass-bg-strong: rgba(27, 36, 54, 0.32);
  --glass-bg-soft: rgba(27, 36, 54, 0.20);

  --overlay-bottom-start: rgba(16, 24, 39, 0);
  --overlay-bottom-end: rgba(16, 24, 39, 0.90);
  --overlay-full-dim: rgba(16, 24, 39, 0.28);

  --hud-color: rgba(244, 241, 234, 0.88);
  --hud-soft: rgba(247, 249, 252, 0.12);

  --text-shadow-color: rgba(0, 0, 0, 0.72);
}

/* ── Light Theme ── */
[data-theme="light"] {
  --bg-primary: var(--nagi-snow-white);
  --bg-secondary: var(--nagi-mist-blue);
  --text-primary: var(--nagi-ink-navy);
  --text-secondary: rgba(27, 36, 48, 0.62);
  --text-weak: rgba(27, 36, 48, 0.42);
  --text-inverse: var(--nagi-snow-white);
  --border-subtle: rgba(27, 36, 48, 0.08);
  --icon-default: rgba(27, 36, 48, 0.76);
  --accent-primary: var(--nagi-rose-gold);
  --accent-heart: var(--nagi-muted-rose);
  --danger: var(--nagi-dried-wine);
  --success-special: #B89B62;

  --glass-bg: rgba(247, 249, 252, 0.38);
  --glass-bg-strong: rgba(247, 249, 252, 0.62);
  --glass-bg-soft: rgba(247, 249, 252, 0.38);

  --overlay-bottom-start: rgba(247, 249, 252, 0);
  --overlay-bottom-end: rgba(247, 249, 252, 0.82);
  --overlay-full-dim: rgba(16, 24, 39, 0.28);

  --hud-color: rgba(27, 36, 48, 0.76);
  --hud-soft: rgba(27, 36, 48, 0.12);

  --text-shadow-color: rgba(255, 255, 255, 0.48);
}