/* TGF Design System — Tokens v3 (Midnight Archive) */

:root {
  /* Background layers — dark mode */
  --color-bg-paper: #0F0F12;
  --color-bg-paper-alt: #16161A;
  --color-bg-sheet: #1A1A1F;

  /* Ink layers (warm aged paper) */
  --color-ink-deep: #EDE6D3;
  --color-ink-dossier: #A39D90;
  --color-ink-ghost: #847E77;

  /* Accents */
  --color-accent-primary: #D4A24C;
  --color-accent-annotation: #C33737;

  /* Volume swatches */
  --color-volume-01: #D4A24C;
  --color-volume-02: #6FA38A;
  --color-volume-03: #B88A6C;

  /* Type */
  --font-display: "Playfair Display", Georgia, serif;
  --font-display-magazine: "Playfair Display", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-nav: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  --font-jp-serif: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-jp-body: "Noto Serif JP", "Yu Mincho", serif;

  /* Weights */
  --weight-display: 400;
  --weight-body: 400;
  --weight-body-emphasis: 600;
  --weight-nav: 400;
  --weight-nav-strong: 500;
  --weight-jp-display: 700;

  /* Scale */
  --size-hero-display: clamp(3rem, 8vw, 5.5rem);
  --size-hero-kanji: clamp(6rem, 18vw, 12rem);
  --size-hero-jp: clamp(1.375rem, 3vw, 2rem);
  --size-article-title: clamp(2rem, 4.5vw, 3.25rem);
  --size-h2: 1.625rem;
  --size-h3: 1.25rem;
  --size-body: 1.0625rem;
  --size-body-lead: 1.25rem;
  --size-blockquote: 1.125rem;
  --size-meta: 0.75rem;
  --size-ledger: 0.9375rem;

  /* Letter-spacing */
  --ls-label: 0.14em;
  --ls-eyebrow: 0.18em;
  --ls-emphasis: 0.22em;
  --ls-heading: 0.01em;

  /* Line heights */
  --lh-display: 1.05;
  --lh-hero-jp: 1.4;
  --lh-body: 1.65;
  --lh-meta: 1.5;

  /* Spacing */
  --space-breath: clamp(0.5rem, 1vw, 0.75rem);
  --space-paragraph: clamp(1rem, 2vw, 1.5rem);
  --space-cluster: clamp(3rem, 6vw, 4.5rem);
  --space-section: clamp(5rem, 8vw, 7rem);
  --space-page: clamp(7rem, 12vw, 10rem);

  /* Layout */
  --sidebar-width: 18rem;
  --article-width: 42rem;
  --gutter: 3rem;

  /* Rules */
  --rule-hairline: 0.5px solid rgba(237, 230, 211, 0.12);
  --rule-section: 2px solid var(--color-accent-primary);
  --rule-annotation: 1px solid var(--color-accent-annotation);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

[data-volume="02"] { --color-accent-primary: var(--color-volume-02); }
[data-volume="03"] { --color-accent-primary: var(--color-volume-03); }

::selection {
  background: var(--color-accent-primary);
  color: var(--color-bg-paper);
}

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

html, body {
  background: var(--color-bg-paper);
  color: var(--color-ink-deep);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}