/* 360 Maven design tokens
   Source: refero.design "Brutalist editorial showroom on warm gray"
   (styles.refero.design/style/ee403055-480e-4bd4-9216-07c9ae2dde2e) */

@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Colors */
  --color-carbon-black: #000000;
  --color-graphite: #2f2f2f;
  --color-slate: #444444;
  --color-smoke: #979797;
  --color-ash: #c6c6c6;
  --color-warm-canvas: #e5e5e5;
  --color-mist-gray: #f3f3f3;
  --color-paper-white: #ffffff;
  --color-mint-chip: #d1ffca;
  --color-voltage-yellow: #fff100;

  /* TWO GROUNDS, one hard seam. The descent gradient is retired (Jon,
     2026-08-28: "I don't like the gradient"). The page now works like the
     dayos reference: a flat light hero, then one black slab with rounded
     top corners running to the footer. Renders composed on pure black
     (the process clusters) screen-blend invisibly into --ground-dark. */
  --ground-light: var(--color-warm-canvas);
  /* PURE BLACK, not #060606. The process clusters are videos composed on
     #000; over a #060606 slab their plates need mix-blend-mode to vanish,
     and Chromium skips that blend on hardware-decoded video (measured: one
     decode path blended, another painted an opaque #000 square). On a #000
     ground the plate is invisible with no blend involved. Also simply more
     dayos: their slab is black. */
  --ground-dark: #000000;
  --rule-dark: rgba(255, 255, 255, 0.18);

  /* The single accent: mint, for the highlight moments only (row markers,
     nav CTA, focus on dark grounds, selection). Voltage yellow stays a
     token but no longer appears on the page. */
  --accent: var(--color-mint-chip);

  /* Surfaces */
  --surface-canvas: var(--color-warm-canvas);
  --surface-card: var(--color-paper-white);
  --surface-inverted: var(--color-carbon-black);
  --surface-mist: var(--color-mist-gray);

  /* Fonts */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Type scale (display faces never render below 48px) */
  /* display-xl capped at 100px, not the spec's 130px: the 9-word hero h1 ran
     6 stacked lines at 130px and pushed the sub + CTAs below an 800px fold.
     Jon chose tightening the scale over shortening the copy (2026-08-27). */
  --text-display-xl: clamp(3.5rem, 7vw, 6.25rem);      /* 56 -> 100px */
  --text-display: clamp(3rem, 6.5vw, 5rem);            /* 48 -> 80px */
  --text-heading-lg: clamp(3rem, 4.5vw, 3rem);         /* 48px */
  --text-heading: clamp(1.75rem, 3.4vw, 2.5rem);       /* 28 -> 40px */
  --text-heading-sm: 1.75rem;                          /* 28px */
  --text-subheading-lg: 1.25rem;                       /* 20px */
  --text-subheading: 1.125rem;                         /* 18px */
  --text-body: 1rem;                                   /* 16px */
  --text-body-sm: 0.875rem;                            /* 14px */
  --text-caption: 0.75rem;                             /* 12px */

  --leading-display: 0.9;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;

  /* Spacing (8px base) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  /* Layout */
  --page-max: 1200px;
  --section-gap: var(--space-10);
  --nav-height: 8rem;

  /* Radius */
  --radius-button: 8px;
  --radius-button-ghost: 4px;
  --radius-card: 32px;
  --radius-card-lg: 64px;
  --radius-pill: 48px;
  --radius-tag: 9999px;
}