/* design-system.css — Penumbra Tattoo. SINGLE SOURCE OF TRUTH for tokens.
   "Single Source": a true COOL-charcoal museum dark + ONE deep-oxblood light.
   Black-and-grey realism rendered as UI. Editorial serif (Spectral) + grotesque (Geist).
   Penumbra = the partial shadow; the hero portrait emerges from it on scroll.
   Palette validated: 8 hex, 1 accent (<6%), cool greys (NOT warm sumi), no pure #000/#fff,
   no banned beige/brass, no neon glow. AA verified (text 14.8:1, muted 5.1:1, accent_soft 5.0:1). */
:root{
  /* ── colour — cool graphite museum dark, one oxblood light ── */
  --bg:        #101113;   /* cool near-black, blue-grey bias (NOT Kuro's warm #0B0B0D) */
  --surface:   #16181B;   /* a hair raised — panels, footer */
  --surface-2: #1D2024;   /* deeper panel / hover */
  --text:      #E7E8EA;   /* cool bone, the gallery-wall light */
  --muted:     #8C9197;   /* graphite grey — secondary copy, captions */
  --faint:     #5C6066;   /* the deepest readable grey — plate numbers, rules */
  --accent:    #8E2C33;   /* deep oxblood — the single light source, < 6%, never a glow */
  --accent-soft:#A8444B;  /* oxblood for small text on dark (AA 5.0:1) */

  /* derived tints (no new hue) */
  --line:    color-mix(in srgb, var(--text) 12%, transparent);  /* hairline rule */
  --line-2:  color-mix(in srgb, var(--text) 6%,  transparent);  /* faintest divider */
  --on-accent:#F2E7E8;   /* off-white text on the oxblood fill (not pure white) */
  --scrim:   color-mix(in srgb, var(--bg) 88%, transparent);

  /* ── type ── */
  --font-display: "Spectral", "Spectral SubHead", Georgia, serif;     /* editorial monograph serif */
  --font-body:    "Geist", system-ui, -apple-system, sans-serif;      /* clean grotesque body */
  --font-mono:    "Geist Mono", ui-monospace, monospace;              /* gallery wall-label / catalog no. */

  /* ── type scale — editorial, calm, large voids (density 2) ── */
  --step--2: .76rem;
  --step--1: .875rem;
  --step-0:  1.0625rem;   /* body a touch large for a reading cadence */
  --step-1:  1.3rem;
  --step-2:  1.75rem;
  --step-3:  2.4rem;
  --step-4:  clamp(2.7rem, 6vw, 4.6rem);
  --step-5:  clamp(3.2rem, 8.5vw, 7.4rem);   /* hero / manifesto — large, composed, <=2 lines */

  /* tracking — gallery-label labels are wide; serif display only a hair tight */
  --track-display: -0.018em;
  --track-label:   0.26em;     /* the mono wall-label */
  --track-eyebrow: 0.34em;

  /* ── spacing + radius (ONE radius scale: all-sharp — museum frame) ── */
  --space:     clamp(1rem, 3vw, 2rem);
  --section-y: clamp(3.5rem, 6.5vw, 5.25rem); /* composed dense rhythm — no mostly-empty screen */
  --container: 1180px;
  --radius:    0px;                         /* all-sharp, locked — framed like a print */
  --hair:      1px;
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-reveal: cubic-bezier(.62, .05, .18, 1);   /* the slow shadow-to-light curve */

  /* tinted shadow to the bg hue (never pure-black drop shadow) */
  --shadow: 0 30px 80px -40px color-mix(in srgb, #000 70%, transparent);
}

/* base type rendering off the tokens (the engine reads these) */
body{ background:var(--bg); color:var(--text); font-family:var(--font-body);
  letter-spacing:-.004em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.05; letter-spacing:var(--track-display); }
::selection{ background:var(--accent); color:var(--on-accent); }
:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important }
}