/* Design tokens — the single source of truth for every visual value.
   Spacing, type scale and radius follow the landing-page-design skill. */

:root {
  /* Spacing (B2) */
  --s-25: 2px;
  --s-50: 4px;
  --s-75: 8px;
  --s-100: 12px;
  --s-200: 16px;
  --s-300: 24px;
  --s-400: 32px;
  --s-500: 40px;
  --s-600: 48px;
  --s-700: 64px;
  --s-800: 80px;
  --s-900: 96px;

  /* Radius (Tailwind scale) */
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-full: 9999px;

  /* Motion (B7) */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 300ms;
  --d-base: 500ms;
  --d-reveal: 700ms;

  /* Font: one typeface, CJK falls back to the system Chinese face */
  --font: "Manrope", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;

  /* Color — warm afternoon light, taken from the reference cover */
  --bg: #fbf6ec;            /* cream wall */
  --surface: #fffdf8;       /* paper */
  --surface-2: #f4ecdc;     /* sunlit plaster */
  --line: #e7dcc6;
  --ink: #1f2a1c;           /* deep forest ink */
  --ink-2: #4d5646;
  --ink-3: #7d826f;
  --forest: #2f4a2a;        /* the green of the 3D letters */
  --forest-hover: #253c21;
  --olive: #5b6b2e;
  --brass: #b98a3e;         /* gold trim */
  --brass-soft: #f1e2c2;
  --maple: #d9622b;         /* the avatar's maple leaves */
  --walnut: #6b4329;
  --on-forest: #fbf6ec;
  --heading-from: #1f3a1f;
  --heading-to: #6b7a3a;
  --nav-surface: rgba(255, 253, 248, 0.72);
  --panel-surface: rgba(251, 246, 236, 0.94);
  --focus: #b98a3e;

  /* Dark band (tagline reveal) uses the approved warm black */
  --band: #131209;
  --band-ink: #f6eedd;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131209;
    --surface: #1f1f1f;
    --surface-2: #181818;
    --line: #313131;
    --ink: #f6eedd;
    --ink-2: #cfc6b2;
    --ink-3: #9a9384;
    --forest: #a9bf6a;
    --forest-hover: #bfd47e;
    --olive: #b7c47f;
    --brass: #d8ac5f;
    --brass-soft: #272727;
    --on-forest: #131209;
    --heading-from: #ffffff;
    --heading-to: #9b9b9b;
    --nav-surface: rgba(31, 31, 31, 0.72);
    --panel-surface: rgba(19, 18, 9, 0.94);
    --band: #000000;
  }
}

:root[data-theme="dark"] {
  --bg: #131209;
  --surface: #1f1f1f;
  --surface-2: #181818;
  --line: #313131;
  --ink: #f6eedd;
  --ink-2: #cfc6b2;
  --ink-3: #9a9384;
  --forest: #a9bf6a;
  --forest-hover: #bfd47e;
  --olive: #b7c47f;
  --brass: #d8ac5f;
  --brass-soft: #272727;
  --on-forest: #131209;
  --heading-from: #ffffff;
  --heading-to: #9b9b9b;
  --nav-surface: rgba(31, 31, 31, 0.72);
  --panel-surface: rgba(19, 18, 9, 0.94);
  --band: #000000;
}