/*
 * Canonical design tokens for web and app prototypes.
 * Keep product-specific component styles out of this file.
 */

:root {
  /* Atlas content colors: independent from the interface theme. */
  /* Malachite lowlands and ochre highlands, after the blue-green landscape palette. */
  --atlas-terrain-forest: #2f5a4c;
  --atlas-terrain-rock: #b39a6a;
  --atlas-deep-water: #0e2c40;
  --atlas-horizon: #a9c3c8;
  --atlas-boundary-paper: #eee7ca;
  --atlas-boundary-ink: #172c27;
  --atlas-label-paper: #fff9eb;
  --atlas-label-ink: #12251c;
  --atlas-capital-label-paper: #e8c98a;
  --atlas-capital-label-ink: #24180c;
  --atlas-label-outline-width: 1;
  --atlas-polity-label-font: 600 22px 'Atlas Kai', 'Kaiti SC', 'KaiTi', serif;
  --atlas-capital-label-font: 500 14px 'Atlas Kai', 'Kaiti SC', 'KaiTi', serif;
  --atlas-boundary-width: 3.2;
  --atlas-boundary-near-width: 2.4;
  --atlas-boundary-outline-width: 1.1;
  --atlas-territory-opacity: 0.42;
  --atlas-territory-near-opacity: 0.12;
  --atlas-territory-transition-ms: 900;
  /* Interface: night-ink glass floating over the globe, silk text, gilt accents. */
  --atlas-night: #05080c;
  --atlas-paper: #eee6d3;
  --atlas-muted: #a8a596;
  --atlas-brass: #d4b679;
  --atlas-water: #466d70;
  --atlas-rock: #b2a787;
  --atlas-panel: rgb(13 19 26 / 94%);
  --atlas-panel-solid: #0f161d;
  --atlas-glass: rgb(12 18 25 / 58%);
  --atlas-glass-line: rgb(214 224 232 / 12%);
  --atlas-field: #18212b;
  --atlas-hover: rgb(222 230 238 / 9%);
  --atlas-line: #5b6670;
  --atlas-faint-line: rgb(214 224 232 / 12%);
  --atlas-accent-surface: #d6c193;
  --atlas-on-accent: #2d2416;
  --atlas-shadow: 0 20px 50px rgb(0 0 0 / 45%);
  --atlas-focus: #e4c88d;
  /* Historical navigation periods, not polity ownership or boundary accuracy.
     Aged mineral pigments harmonized in OKLCH: L 0.55–0.68, C 0.045–0.10;
     chronological neighbors always differ by hue or a clear lightness step. */
  --atlas-period-xia: #a49060;
  --atlas-period-shang: #ae7764;
  --atlas-period-western-zhou: #709877;
  --atlas-period-spring-autumn: #518b95;
  --atlas-period-warring: #a2614d;
  --atlas-period-qin: #786f8b;
  --atlas-period-han: #b46765;
  --atlas-period-three: #4c896f;
  --atlas-period-jin: #688aa8;
  --atlas-period-north-south: #977293;
  --atlas-period-sui: #3a7f7b;
  --atlas-period-tang: #b69250;
  --atlas-period-five: #8281a9;
  --atlas-period-song: #709d93;
  --atlas-period-yuan: #7c8656;
  --atlas-period-ming: #b0724c;
  --atlas-period-qing: #617aab;
  --atlas-title-font:
    'Didot', 'Bodoni 72', 'Playfair Display', Georgia, 'Songti SC', 'STSong', 'Noto Serif SC',
    'Source Han Serif SC', 'SimSun', serif;
  --atlas-body-font:
    Georgia, 'Times New Roman', 'Songti SC', 'STSong', 'Noto Serif SC', 'Source Han Serif SC',
    'SimSun', serif;
  --atlas-number-font:
    'Didot', 'Bodoni 72', 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', 'Songti SC',
    serif;
  /* Vertical dynasty title: bundled Song subset first, then CJK serif so upright glyphs
     never fall back to Latin metrics. The subset carries only dynasty-name characters. */
  --atlas-hero-font:
    'Atlas Display', 'Songti SC', 'STSong', 'Noto Serif SC', 'Source Han Serif SC',
    'Noto Serif CJK SC', 'SimSun', serif;
  --atlas-radius-panel: 10px;
  --atlas-radius-control: 6px;
  --atlas-edge: 28px;
  --atlas-explore-space: 232px;
  --atlas-story-space: 270px;
  --atlas-timeline-space: var(--atlas-explore-space);
  /* Local stacking contexts: content 0, atmosphere 1, controls 2, popover 3. */
  --atlas-z-atmosphere: 1;
  --atlas-z-controls: 2;
  --atlas-z-popover: 3;
  color-scheme: dark;

  /* Foundation palette */
  --color-ink: #17313b;
  --color-mist: #f2f7f8;
  --color-porcelain: #ffffff;
  --color-cobalt: #3567d6;
  --color-cobalt-wash: #dfe9ff;
  --color-coral: #df6c52;

  /* Semantic color */
  --color-text: var(--color-ink);
  --color-text-muted: #5c737c;
  --color-text-inverse: var(--color-porcelain);
  --color-text-inverse-muted: #c8d5da;
  --color-background: var(--color-mist);
  --color-surface: var(--color-porcelain);
  --color-surface-raised: #f9fbfc;
  --color-surface-hover: #e5eef0;
  --color-border: #bfd0d5;
  --color-border-strong: #819aa3;
  --color-action: var(--color-cobalt);
  --color-action-hover: #2854bb;
  --color-action-soft: var(--color-cobalt-wash);
  --color-action-on-dark: #9ebaff;
  --color-notice: var(--color-coral);
  --color-notice-soft: #f8e5e0;
  --color-focus: #6e93ee;

  /* Typography */
  --font-display: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --font-body: 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-data: 'DIN Alternate', 'Roboto Mono', ui-monospace, monospace;
  --font-size-0: 0.75rem;
  --font-size-1: 0.875rem;
  --font-size-2: 1rem;
  --font-size-3: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --font-size-4: clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem);
  --font-size-5: clamp(2.5rem, 1.7rem + 3.4vw, 5.5rem);
  --line-height-tight: 0.98;
  --line-height-heading: 1.15;
  --line-height-body: 1.65;
  --letter-spacing-tight: -0.045em;
  --letter-spacing-label: 0.12em;

  /* Spacing: 4px base unit */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Shape */
  --radius-small: 0.5rem;
  --radius-medium: 1rem;
  --radius-large: 1.75rem;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-strong: 2px;

  /* Layout */
  --layout-max: 75rem;
  --layout-gutter: clamp(1rem, 4vw, 3rem);
  --touch-target: 2.75rem;

  /* Depth */
  --shadow-small: 0 0.375rem 1rem rgb(23 49 59 / 8%);
  --shadow-large: 0 1.5rem 4rem rgb(23 49 59 / 14%);

  /* Motion */
  --duration-fast: 180ms;
  --duration-medium: 280ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}