/* tokens.css — ExamplePDF v1
   Source of truth: stages/06-design/frontend-handoff.md §1 + design-source.md §1.
   Owner-approved ORYZO darkroom palette — do not alter values. */
:root {
  /* ---- color: ORYZO darkroom palette (owner-approved, do not alter) ---- */
  --color-walnut-shadow: #100904;   /* canvas, warm near-black */
  --color-bark-brown:    #382416;   /* ONLY solid action surface */
  --color-bark-hover:    #452c1b;   /* pill hover step */
  --color-cork-border:   #40372e;   /* hairline dashed dividers */
  --color-driftwood:     #6c5f51;   /* mid warm gray, placeholders */
  --color-warm-cream:    #ffedd7;   /* all text, never pure #fff */
  --color-ember-accent:  #dc5000;   /* links/tags/labels ONLY — never button fill */
  --color-pure-black:    #000000;   /* SVG icon fills only */
  --color-cream-72: rgba(255,237,215,.72);  /* body step-down */
  --color-cream-48: rgba(255,237,215,.48);  /* metadata / muted */
  --color-cream-16: rgba(255,237,215,.16);  /* artifact paper edge */
  --color-cream-06: rgba(255,237,215,.06);  /* ghost hover veil */
  --color-bark-55:  rgba(56,36,22,.55);     /* cell hover fill */
  --color-bark-45:  rgba(56,36,22,.45);     /* card hover fill */
  --color-bark-40:  rgba(56,36,22,.40);     /* row hover fill */
  --color-bark-25:  rgba(56,36,22,.25);     /* code block / panel fill */
  --color-void-overlay: rgba(16,9,4,.92);
  --color-ember-55: rgba(220,80,0,.55);     /* warning borders */
  --color-ember-50: rgba(220,80,0,.50);
  /* derived sheet/recipe tokens (design-source §6.3 values) */
  --color-cream-24: rgba(255,237,215,.24);  /* sheet text lines */
  --color-cream-12: rgba(255,237,215,.12);  /* stacked sheets */
  --color-cream-03: rgba(255,237,215,.03);  /* artifact sheet fill */
  --color-ember-72: rgba(220,80,0,.72);     /* encrypted password line */

  /* ---- type ---- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-fallback-micro: 'Arial', ui-sans-serif, system-ui;

  --text-display:    clamp(34px, 5.5vw, 51px);  --leading-display: .95;
  --text-heading:    clamp(28px, 4.5vw, 41px);  --leading-heading: .95;
  --text-body:       clamp(20px, 2.6vw, 29px);  --leading-body: 1.26;
  --text-heading-sm: clamp(20px, 2.8vw, 24px);  --leading-heading-sm: 1.09;
  --text-subheading: clamp(16px, 2vw, 18px);    --leading-subheading: 1;
  --text-label: 14px;  --text-micro: 12px;  --text-fineprint: 10px;
  --text-mono: 14px;  --text-mono-sm: 12px;  --text-mono-lg: clamp(16px, 2vw, 18px);
  --fw-regular: 400;  --fw-medium: 500;

  /* ---- space (4px base + reference signature values) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:18px;
  --sp-6:24px; --sp-8:31px; --sp-10:41px; --sp-11:45px; --sp-17:68px; --sp-51:204px;
  --section-pad-block: clamp(68px, 9vw, 136px);  /* section vertical whitespace */
  --content-max: 1140px;  --prose-max: 820px;  --legal-max: 720px;
  --grid-gutter: 24px;  --card-padding: 24px;  --element-gap: 18px;

  /* ---- radius ladder ---- */
  --radius-pill: 36px;  --radius-ghost: 22.5px;  --radius-card: 12px;
  --radius-input: 0px;  --radius-full: 9999px;  --radius-control: 4px;

  /* ---- lines (never solid >1px, never >2px) ---- */
  --line-dashed: 1px dashed var(--color-cork-border);
  --line-dashed-soft: 1px dashed rgba(64,55,46,.6);
  --line-dashed-drift: 1px dashed var(--color-driftwood);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-1: 150ms; --dur-2: 200ms; --dur-3: 250ms; --dur-reveal: 500ms;
  --stagger: 60ms;

  color-scheme: dark light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1:1ms; --dur-2:1ms; --dur-3:1ms; --dur-reveal:150ms; --stagger:0ms; }
}

/* base */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-walnut-shadow); color: var(--color-warm-cream);
  font: var(--fw-regular) 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
/* darkroom key light — amber washes fixed behind the whole site (V2 ambience) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(56rem 38rem at 76% 4%, rgba(220,80,0,.13), transparent 62%),
    radial-gradient(46rem 34rem at 2% 84%, rgba(220,80,0,.055), transparent 60%),
    radial-gradient(72rem 30rem at 50% 112%, rgba(255,237,215,.04), transparent 65%);
}
/* darkroom grain — static, ~1KB inline SVG, sits ABOVE content as film texture (V2: z 1→3) */
body::after {
  content:""; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity:.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ============================================================================
   V4 — LIGHT THEME (warm paper white, not clinical white)
   Mechanism: <html data-theme="dark|light">. Dark values above are the
   default (darkroom = brand identity). The block below overrides every
   color token — components pick light values up automatically.
   The API terminal (.term) intentionally stays dark in both themes.
   ============================================================================ */
[data-theme="light"] {
  color-scheme: light;
  /* surfaces — two warm-paper whites, alternating per section */
  --color-walnut-shadow: #faf6ee;  /* primary canvas */
  --color-bark-brown:    #ecdfc9;  /* solid action surface (warm parchment) */
  --color-bark-hover:    #e2d0b2;  /* pill hover step */
  --color-cork-border:   #d8c7ad;  /* hairline dashed dividers */
  --color-driftwood:     #9b8768;  /* mid warm gray, placeholders */
  /* ink — brown-black body, never pure black */
  --color-warm-cream:    #2b1a0e;
  --color-pure-black:    #2b1a0e;
  --color-ember-accent:  #b34207;  /* deepened for 4.5:1 on paper */
  /* cream alpha steps → ink alpha steps (same role, inverted luminance) */
  --color-cream-72: rgba(43,26,14,.78);
  --color-cream-48: rgba(43,26,14,.60);
  --color-cream-16: rgba(43,26,14,.22);
  --color-cream-06: rgba(43,26,14,.055);
  /* cell/card/row hover fills — warm parchment instead of bark */
  --color-bark-55: rgba(43,26,14,.07);
  --color-bark-45: rgba(43,26,14,.06);
  --color-bark-40: rgba(43,26,14,.05);
  --color-bark-25: rgba(43,26,14,.04);
  --color-void-overlay: rgba(250,246,238,.94);
  --color-ember-55: rgba(179,66,7,.55);
  --color-ember-50: rgba(179,66,7,.45);
  --color-cream-24: rgba(43,26,14,.30);
  --color-cream-12: rgba(43,26,14,.15);
  --color-cream-03: rgba(43,26,14,.03);
  --color-ember-72: rgba(179,66,7,.80);
  /* gold voice — deepened for contrast on paper */
  --color-gold:        #a8722f;
  --color-gold-deep:   #8f5f24;
  --color-gold-40: rgba(168,114,47,.45);
  --color-gold-25: rgba(168,114,47,.30);
  --color-gold-12: rgba(168,114,47,.14);
  --color-gold-07: rgba(168,114,47,.08);
  /* cream luminance steps for illustration fills */
  --color-cream-mid: #6a5642;
  --color-cream-dark:#8a7358;
  /* iron-oxide accent — visible on paper */
  --color-oxide:     #9c3320;
  /* lines */
  --line-dashed-soft: 1px dashed rgba(43,26,14,.22);
}
[data-theme="light"] ::selection { background: rgba(179,66,7,.22); color: #2b1a0e; }
/* key light on paper — soft amber washes, still warm, still lit */
[data-theme="light"] body::before {
  background:
    radial-gradient(56rem 38rem at 76% 4%, rgba(217,154,78,.18), transparent 62%),
    radial-gradient(46rem 34rem at 2% 84%, rgba(220,120,40,.08), transparent 60%),
    radial-gradient(72rem 30rem at 50% 112%, rgba(168,114,47,.06), transparent 65%);
}
/* grain: multiply at half strength so paper texture never turns gray */
[data-theme="light"] body::after { mix-blend-mode: multiply; opacity: .022; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0; margin: 0; }
::selection { background: var(--color-bark-brown); color: var(--color-warm-cream); }
:focus-visible { outline: 2px dashed var(--color-ember-accent); outline-offset: 4px; }
a { color: inherit; }
code, pre, kbd { font-family: var(--font-mono); }