/* Hallmark · macrostructure: Bento Grid · theme: custom · nav: N9 Edge-aligned minimal · footer: Ft6 Letter close
 * vibe: "grotesque noir, corps sans net, deux polices seulement, papier crème, un seul corail" · paper: oklch(94% 0.016 75) · accent: oklch(58% 0.185 27)
 * display: Bricolage Grotesque (800) · body: IBM Plex Sans (400/500/600/700, roman only) · no outlier — 2-font ceiling at client's request (v3)
 * axes: light / display-heavy / warm · studied: no · context: explicit — client iterated v1 (dark CTA block, italic serif) and v2 (bento dead space, boxed logos/photos, unclear tool copy); this pass drops to 2 fonts, removes all card/frame chrome, restores real tool-stack content
 */
:root {
  /* ---- colour: paper ---- */
  --color-paper:      oklch(94% 0.016 75);
  --color-paper-2:    oklch(91% 0.018 75);
  --color-surface:    oklch(97% 0.010 75);
  --color-rule:       oklch(78% 0.020 74);
  --color-rule-2:     oklch(85% 0.016 74);

  /* ---- colour: ink ---- */
  --color-ink:        oklch(19% 0.012 40);
  --color-ink-2:      oklch(38% 0.012 42);
  --color-muted:      oklch(54% 0.012 45);

  /* ---- colour: accent ---- */
  --color-accent:     oklch(58% 0.185 27);
  --color-accent-soft: oklch(78% 0.075 32);
  --color-accent-ink: var(--color-paper);
  --color-focus:      oklch(60% 0.210 27);

  /* ---- type (2 families only) ---- */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  2.875rem;
  --text-display:   clamp(2.5rem, 4vw + 1.4rem, 4.5rem);
  --text-display-s: clamp(2.1rem, 3vw + 1.2rem, 3.1rem);

  /* ---- space (4pt) ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 3.5rem;
  --space-3xl: 4.5rem;
  --space-4xl: 7rem;

  /* ---- motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ---- radius (square-editorial — hairline grid, no pills except the lang toggle) ---- */
  --radius-btn:   4px;
  --radius-chip:  3px;
  --radius-panel: 2px;
  --radius-image: 2px;
  --radius-pill:  999px;

  /* ---- rule weight ---- */
  --rule-hair: 1px;

  /* ---- z-scale ---- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --page-max: 1240px;
}