/* Design tokens, copied as written from DESIGN.md section 1. Change them there first. */
:root {
  /* Paper and ink */
  --paper: #F8F4EB;          /* page ground, sampled from photo */
  --paper-raised: #FCFAF5;   /* cards, reasoning slip, document paper */
  --paper-deep: #EFE6D6;     /* panels, desk mat */
  --ink: #2A211C;            /* body text, 14.4:1 */
  --ink-soft: #6B5A4E;       /* secondary text, 6.0:1 */
  --line: #E2D6C3;           /* hairlines, borders */
  /* Brand */
  --terracotta: #C4694C;     /* arch, fills, large shapes only (3.5:1) */
  --terracotta-ink: #9E4A2B; /* links and small accent text, 5.5:1 */
  --rust: #772A18;           /* focus ring, deep accent, 9.0:1 */
  --peach: #F1CBB4;          /* soft fills, hover wash */
  --gold: #C99A4B;           /* the thin line: 1px rules, arcs. Never text */
  /* Pen inks for the document verdict */
  --pen-approved: #2F6B4F; --pen-human: #B2432F; /* bottle green 5.7:1, vermilion 5.1:1 */
  /* Dark windows on the laptop (Claude terminal) */
  --screen-bg: #1C1815; --screen-panel: #25201C; --screen-line: #3A302A;
  --screen-text: #EDE4D6;    /* 14.0:1 on --screen-bg */
  --screen-dim: #A39282;     /* 5.9:1 */
  --screen-accent: #E0896A;  /* terracotta lifted for dark ground, 6.7:1 */
  --screen-ok: #8FBF8A; --screen-warn: #E5B865; --screen-flag: #EC836B; /* all over 6:1 */

  /* macOS look for the laptop desktop (design/desktop.md, Tokens, 8 Nov 2026) */
  --mac-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Instrument Sans", sans-serif;
  --mac-text: rgba(0, 0, 0, 0.85); --mac-text-2: rgba(0, 0, 0, 0.5); --mac-text-off: rgba(0, 0, 0, 0.25);
  --mac-accent: #007AFF;
  --row-selected: #0064E1; --row-selected-dim: rgba(0, 0, 0, 0.1);
  --mac-vibrant: blur(30px) saturate(180%);
  --desk-bar: rgba(246, 246, 246, 0.55); --desk-dock: rgba(246, 246, 246, 0.35); --desk-dock-edge: rgba(255, 255, 255, 0.4);
  --mac-menu: rgba(246, 246, 246, 0.82); --mac-menu-edge: rgba(0, 0, 0, 0.12);
  --window-bg: #FFFFFF; --window-bar: #EDEDED; --window-bar-off: #F6F6F6; --window-line: #D1D1D1;
  --mac-radius-window: 10px; --mac-radius-menu: 6px; --mac-radius-row: 4px;
  --mac-shadow-window: 0 0 0 0.5px rgba(0, 0, 0, 0.3), 0 22px 50px rgba(0, 0, 0, 0.35);
  --mac-shadow-window-off: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 10px 26px rgba(0, 0, 0, 0.18);
  --mac-shadow-menu: 0 0 0 0.5px var(--mac-menu-edge), 0 10px 30px rgba(0, 0, 0, 0.22);
  --light-close: #FF5F57; --light-min: #FEBC2E; --light-fill: #28C840; --light-idle: #DDDDDD;
  --light-close-edge: #E2463F; --light-min-edge: #E1A116; --light-fill-edge: #12AC28;

  /* Type: Google Fonts, four families; load all four */
  --font-display: "Fraunces", Georgia, serif;          /* 400, 600, 400 italic; opsz axis */
  --font-body: "Instrument Sans", system-ui, sans-serif; /* 400, 500, 600 */
  --font-mono: "JetBrains Mono", ui-monospace, monospace; /* 400, 500 */
  --font-hand: "Caveat", "Fraunces", cursive;          /* 500; handwriting only: cards, pen verdicts */

  --text-display: clamp(2.75rem, 1.6rem + 4.8vw, 5.5rem); /* lh 1.02, ls -0.02em */
  --text-h1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);        /* lh 1.08, ls -0.015em */
  --text-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);     /* lh 1.15 */
  --text-h3: 1.25rem;                                     /* lh 1.3, body font 600 */
  --text-body: 1.0625rem;                                 /* lh 1.6, max 62ch */
  --text-small: 0.875rem;                                 /* lh 1.5 */
  --text-kicker: 0.75rem;   /* body font 600, uppercase, ls 0.14em */
  --text-mono: 0.8125rem;   /* lh 1.55, screen log and reasoning slip */

  /* Spacing: 4px base */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --gutter: clamp(16px, 4vw, 48px);

  /* Radii */
  --radius-paper: 2px; --radius-control: 6px; --radius-panel: 10px; --radius-card: 14px; --radius-pill: 999px;

  /* Shadows: warm-tinted, never grey */
  --shadow-1: 0 1px 2px rgba(74, 42, 24, 0.08), 0 2px 6px rgba(74, 42, 24, 0.06);
  --shadow-2: 0 4px 12px rgba(74, 42, 24, 0.10), 0 12px 32px rgba(74, 42, 24, 0.08);
  --shadow-3: 0 18px 48px rgba(74, 42, 24, 0.18);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--rust);

  /* Motion */
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 480ms; /* hover; panels; flips */
  --dur-glide: 1100ms; --dur-zoom: 1400ms; /* scroll camera; desk to laptop screen */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press: cubic-bezier(0.5, 0, 0.75, 0); /* pen nib touch-down, accelerates */
}

/* Forced colours (Windows high contrast) drop box-shadow, so focus also gets a real outline there. */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}