/* AIctualize design tokens — source: Claude Design spec + docs/27-site-plan.md */
:root {
  --black: #111111;      /* page ground, nav, footer */
  --graphite: #232323;   /* raised surfaces (film frames, bands) */
  --teal: #0F6F6A;       /* primary action */
  --teal-bright: #4CC5B9;/* accent on dark */
  --silver: #B8BCC0;     /* rules, inactive */
  --offwhite: #EDEDEA;   /* type */

  --text: var(--offwhite);
  --text-dim: var(--offwhite); /* no gray type anywhere: everything is white or teal (Mason, 2026-09-07) */
  --rule: rgba(184, 188, 192, 0.22);
  --box-border: rgba(237, 237, 234, 0.85); /* every card/box outline; white on dark, dark on light (Mason, 2026-09-10) */
  --dot: rgba(76, 197, 185, 0.11); /* blueprint-paper dots, faint teal (design 6a value) */
  --bp-gutter: var(--gutter);

  --font-display: 'Chivo', 'Inter', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', Helvetica, Arial, sans-serif;

  --max: 1440px;   /* the content container: text and grids cap here, only imagery and backgrounds bleed */
  --gutter: clamp(24px, 4.5vw, 64px);
  --section: 84px;
  --head-h: 86px;
}