/* Hallmark · tokens.css - design-language tokens for the bxffour portfolio.
 * Structure + typographic scale studied from gwuah.com (Barlow, thin display vs small body)
 * green on black · Barlow display+body · IBM Plex Mono for tech labels
 */
:root {
  /* color - green on black */
  --color-paper: oklch(16% 0.012 250);
  --color-paper-2: oklch(20% 0.014 250);
  --color-ink: oklch(93% 0.008 250);
  --color-ink-2: oklch(72% 0.014 250);
  --color-ink-3: oklch(56% 0.016 250);
  --color-ink-4: oklch(46% 0.014 250);
  --color-accent: oklch(78% 0.13 162);
  --color-accent-strong: oklch(86% 0.12 162);
  --color-accent-dim: oklch(56% 0.11 162);
  --color-focus: var(--color-accent);
  --color-border: oklch(30% 0.016 250);
  --color-border-soft: oklch(24% 0.014 250);

  /* font */
  --font-display: "Barlow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* text scale - gwuah: big thin display vs small body */
  --text-display: clamp(2.2rem, 6vw, 2.8rem); /* ~35-45px */
  --text-name: 1.375rem;                       /* 22px */
  --text-body: 1rem;                           /* 16px */
  --text-small: 0.9375rem;                     /* 15px */
  --text-meta: 0.6875rem;                      /* 11px */

  /* space - 4pt scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-30: 7.5rem;
  --space-36: 9rem;

  /* negative-space landmarks - gwuah */
  --pad-top: 120px;
  --hero-tuck: -50px;
  --footer-mt: 150px;
  --footer-py: 130px;

  /* rule + radius */
  --rule-hair: 1px;
  --radius: 0.25rem;

  /* motion (kept for tokens completeness; gwuah is static) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-base: 200ms;
}