/* ============================================================
   Potato Literature — design tokens
   The only file in this artifact allowed to contain color values.
   Extracted 2026-08-04:
     [context]  potatoliterature-web/src/styles/tokens.css (verbatim)
     [context]  potatuhs-design/DESIGN.md (umbrella inheritance)
     [proposed] doc-scale values drafted for this document
   DESIGN.md in this folder records per-token provenance.
   ============================================================ */

:root {
  /* ── Brand palette — INHERITED from Potatuhs umbrella ── */
  --brand-start: #e16416; /* Fiery Orange */
  --brand-mid: #e19816;   /* Morning Sienna */
  --brand-end: #e1c916;   /* Golden Shade */

  /* ── Structural — inherited names, site-confirmed values ── */
  --ink: #1c1917;
  --paper: #ffffff;
  --paper-warm: #fdf5eb;
  --muted: #666666;
  --subtle: #999999;

  /* ── The Reading Room (workspace) — BRAND-OWNED ── */
  --room: #1a1612;
  --room-grain: #221c17;
  --room-fg: #f4ebdd;

  /* ── Library accents — BRAND-OWNED assignment (one color per book) ── */
  --book-hole: #e16416;   /* Down the Hole — shares the umbrella orange */
  --book-void: #6690a3;   /* Into the Void — umbrella "Air Force Blue" hue */
  --book-aether: #7272ab; /* Through the Aether — umbrella "Glaucous" hue */
  --book-lore: #b08d3e;   /* Writers'-room bible — parchment gold, never ships */

  /* ── Gradients ── */
  --gradient-brand: linear-gradient(180deg, var(--brand-start) 0%, var(--brand-mid) 50%, var(--brand-end) 100%);
  --gradient-tab-active: linear-gradient(180deg, var(--brand-start), var(--brand-mid));
  --gradient-room:
    radial-gradient(circle at 20% 0%, var(--room-grain), transparent 50%),
    radial-gradient(circle at 80% 100%, var(--room-grain), transparent 60%);

  /* ── Typography ── */
  --font-display: 'Bowlby One SC', 'Outfit', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --font-serif: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  /* Documentary prose face — alternates.css flips this to serif (A/B) */
  --font-prose: var(--font-body);

  /* ── Type scale (this document) — proposed ── */
  --text-hero: clamp(44px, 7vw, 92px);
  --text-h1: clamp(34px, 5vw, 60px);
  --text-h2: clamp(28px, 3.6vw, 44px);
  --text-h3: clamp(19px, 2.2vw, 24px);
  --text-h4: 17px;
  --text-body-lg: 19px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-label: 10px;

  /* ── The eyebrow register (extracted from magazine CSS) ── */
  --track-eyebrow: 0.32em;
  --track-label: 0.22em;

  /* ── Spacing (4px base — site scale, denser than umbrella) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --section-pad: clamp(56px, 9vw, 110px);

  /* ── Radii ── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 100px;

  /* ── Borders ── */
  --border-w: 3px;
  --border: var(--border-w) solid var(--ink);
  --hairline: 1px dashed rgba(28, 25, 23, 0.25);

  /* ── Shadows — hard offsets for chrome, ONE soft shadow for the page ── */
  --sh-badge: 3px 3px 0 var(--ink);
  --sh-btn: 4px 4px 0 var(--ink);
  --sh-btn-hover: 6px 6px 0 var(--ink);
  --sh-card: 8px 8px 0 var(--ink);
  --sh-card-hover: 12px 12px 0 var(--ink);
  --sh-page: 0 18px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);

  /* ── Motion (site-confirmed: faster than umbrella) ── */
  --dur-fast: 0.12s;
  --dur-normal: 0.22s;
  --dur-slow: 0.4s;
  --dur-turn: 0.8s; /* proposed: the page-turn signature */
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Page hard spec (verbatim from site tokens; 8.5x11 magazine) ── */
  --page-w-in: 8.5;
  --page-h-in: 11;
  --page-dpi: 96;
  --page-w: calc(var(--page-w-in) * var(--page-dpi) * 1px);
  --page-h: calc(var(--page-h-in) * var(--page-dpi) * 1px);
  --page-margin-in: 0.5;
  --page-margin: calc(var(--page-margin-in) * var(--page-dpi) * 1px);

  /* ── Layout (inherited umbrella containers) ── */
  --max-w: 1200px;
  --max-w-narrow: 800px;
  --max-w-wide: 1400px;
  --nav-w: 232px;

  /* ── Translucent ink steps (derived from --ink) ── */
  --ink-92: rgba(28, 25, 23, 0.92);
  --ink-70: rgba(28, 25, 23, 0.7);
  --ink-35: rgba(28, 25, 23, 0.35);
  --ink-25: rgba(28, 25, 23, 0.25);
  --ink-08: rgba(28, 25, 23, 0.08);
}