/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5 */
/* Hallmark · genre: editorial · macro: 02-poster · theme: custom (Instagram poster palette: teal fields, cream text on every teal field, ink body text on paper, Outfit headings, Plus Jakarta Sans body, Bebas Neue logo only) · studied: instagram.com/drama_drafting · context: explicit · contrast: pass (40–41) · nav: N9 · footer: Ft1 · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) · motion: 3D and pointer layer 2026-10-10 */
:root {
  /* colour: one brand hue (199, the poster teal) in three tints on cream paper, nothing else */
  --color-paper: oklch(97% 0.025 100);
  --color-paper-2: oklch(93% 0.03 100);
  --color-paper-3: oklch(87% 0.035 100);
  --color-ink: oklch(16% 0.03 215);        /* dark enough for AA small text on the poster teal */
  --color-ink-2: oklch(30% 0.035 215);
  --color-muted: oklch(44% 0.03 215);
  --color-blue: oklch(62% 0.105 199);        /* the Instagram poster teal, #00999e, sampled from post-2026-10-07-poster.jpg */
  --color-blue-deep: oklch(46% 0.09 199);    /* buttons, offer band, sticky bar: AA with cream */
  --color-blue-light: oklch(84% 0.07 199);   /* hover fill */
  --color-cream: oklch(97% 0.025 100);
  --color-accent: var(--color-blue);
  --color-accent-hover: var(--color-blue-light);
  --color-accent-ink: var(--color-cream);
  --color-focus: var(--color-ink);
  --color-error: oklch(52% 0.18 28);
  --color-frame: var(--color-cream);
  --shadow-photo: 0 1rem 2rem oklch(10% 0.03 221 / 0.45);
  --shadow-btn: 0 0.5rem 1rem oklch(10% 0.03 221 / 0.25);
  --shadow-nav: 0 0.5rem 1.5rem oklch(10% 0.03 221 / 0.3);
  --sheen: linear-gradient(110deg, transparent 30%, oklch(100% 0 0 / 0.35) 50%, transparent 70%);
  --glow-1: oklch(84% 0.07 199 / 0.55);     /* blue-light orb */
  --glow-2: oklch(46% 0.09 199 / 0.7);      /* blue-deep orb */
  --glow-3: oklch(97% 0.025 100 / 0.22);    /* cream orb */
  --glare: oklch(100% 0 0 / 0.28);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* type: poster condensed face kept for the logo only, modern geometric display and body everywhere else */
  --font-logo: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-display: "Outfit", "Segoe UI", Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --text-logo: 1.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --text-hero: clamp(2.25rem, 1.3rem + 4vw, 3.9rem);
  --lh-tight: 1.05;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --track-display: -0.02em;
  --track-label: 0.12em;

  /* space, 4pt scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* layout */
  --page-max: 72rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 60ch;
  --frame-w: 3px;
  --banner-height: 4rem;
  --bar-height: 3.75rem;
  --radius: 0;
  --tap: 2.75rem;
}