/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 */
/* Hallmark · macrostructure: Manifesto · tone: technical-austere · anchor hue: 30° crimson */
/* theme: studied-DNA (source: webclaw.io) · paper: oklch(97% 0.003 252) · accent: oklch(38% 0.19 30) */
/* nav: N9 edge-aligned · footer: Ft5 statement · enrichment: Tier A CSS-art · studied: yes */

:root {
  /* COLOUR — webclaw.io DNA, converted to OKLCH */
  --color-paper:    oklch(97% 0.003 252);   /* #f8f9fa */
  --color-paper-2:  oklch(93% 0.005 252);
  --color-paper-3:  oklch(88% 0.006 252);   /* #ced4da zone */
  --color-rule:     oklch(84% 0.007 252);
  --color-muted:    oklch(55% 0.006 252);   /* #6c757d */
  --color-ink-2:    oklch(32% 0.008 264);   /* #495057 */
  --color-ink:      oklch(17% 0.009 264);   /* #212529 */
  --color-ink-dark: oklch(11% 0.008 264);   /* #111418 */
  --color-accent:   oklch(38% 0.19  30);    /* #ad1a04 crimson */
  --color-accent-2: oklch(50% 0.16  30);
  --color-focus:    oklch(52% 0.20  30);

  /* FONT — 2+1 ceiling */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-code:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* TEXT SCALE — major third 1.25 */
  --text-xs:        0.64rem;
  --text-sm:        0.8rem;
  --text-base:      1rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.9531rem;
  --text-2xl:       2.4414rem;
  --text-3xl:       3.0518rem;
  --text-4xl:       3.8147rem;
  --text-display-s: clamp(2rem, 4vw + 0.5rem, 3.25rem);
  --text-display:   clamp(2.75rem, 6vw + 1rem, 5.25rem);

  /* SPACING — 4pt scale */
  --space-3xs: 0.125rem;  /*  2px */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.5rem;    /*  8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2.5rem;    /* 40px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */
  --space-4xl: 9rem;      /* 144px */

  /* RADIUS — webclaw: flat, 0px everywhere */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* MOTION — webclaw DNA timings */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-xs: 150ms;
  --dur-sm: 200ms;
  --dur-md: 300ms;
  --dur-lg: 700ms;

  /* Z-INDEX — six named levels */
  --z-base:   1;
  --z-raised:  10;
  --z-sticky:  50;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}