/* ============================================================
   SERUMON — BRUTALIST TECH TOKENS
   Flat color blocks · thick borders · hard offset shadows.
   No gradients. No blur. No glass.
   ============================================================ */
:root {
  /* ---- core palette ---- */
  --ink: #0a0a0a;
  --ink-soft: #2a2a2a;
  --paper: #f4f1ea;
  --white: #ffffff;
  --accent: #ff5cc8;
  --accent-deep: #d81f96;
  --accent-ink: #b81280;   /* accent tuned for text on light blocks (AA) */
  --plum: #2b1030;
  --plum-soft: #3d1745;

  /* ---- status ---- */
  --ok: #0f7a4d;
  --warn: #b25c00;
  --err: #c00d2e;

  /* ---- semantic (default block) ---- */
  --bg: var(--paper);
  --fg: var(--ink);
  --rule: var(--ink);
  --muted: #55514a;
  --shadow-col: var(--ink);

  /* ---- borders + hard shadows (NEVER blurred) ---- */
  --bw: 3px;
  --bw-thick: 5px;
  --shadow: 6px 6px 0 var(--shadow-col);
  --shadow-sm: 4px 4px 0 var(--shadow-col);
  --shadow-lg: 10px 10px 0 var(--shadow-col);
  --shadow-press: 2px 2px 0 var(--shadow-col);

  /* ---- type families ---- */
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-grotesk: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ---- fluid type scale (clamped, 360 -> 1440) ---- */
  --fs-display: clamp(2.6rem, 1.5rem + 4.8vw, 5.75rem);
  --fs-h1: clamp(2rem, 1.35rem + 2.9vw, 3.75rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  --fs-h3: clamp(1.12rem, 1rem + 0.55vw, 1.45rem);
  --fs-lead: clamp(1.02rem, 0.95rem + 0.38vw, 1.25rem);
  --fs-body: clamp(0.97rem, 0.93rem + 0.18vw, 1.05rem);
  --fs-small: 0.88rem;
  --fs-micro: 0.75rem;
  --fs-num: clamp(1.9rem, 1.35rem + 2.4vw, 3.25rem);

  /* ---- tracking ---- */
  --track-tight: -0.03em;
  --track-wide: 0.08em;
  --track-wider: 0.16em;

  /* ---- 4/8-pt spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 104px;
  --space-12: 136px;

  /* ---- containers ---- */
  --container: 1200px;
  --container-wide: 1400px;
  --container-narrow: 760px;
  --gutter: clamp(16px, 4vw, 40px);

  /* ---- section rhythm ---- */
  --section-y: clamp(56px, 7vw, 112px);
  --section-y-lg: clamp(72px, 10vw, 152px);

  /* ---- motion: snappy + mechanical ---- */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.25, 1);
  --dur-fast: 90ms;
  --dur: 160ms;
  --dur-slow: 320ms;

  --z-nav: 100;
  --z-menu: 200;
}