/* ==========================================================================
   Redloop — design tokens (v4 "Vercel line grid")
   Near-black neutral canvas · 1px neutral hairlines · Geist + Geist Mono
   Primary = Redloop red, used sparingly (one signal per component).
   Violet survives only as ambience that matches the brand renders.
   ========================================================================== */
:root {
  /* canvas */
  --bg: #050506;
  --bg-2: #0a0a0b;          /* alt cell */
  --bg-3: #111113;          /* raised surface (cards, inputs) */
  --bg-4: #1a1a1d;          /* hover / active surface */

  /* hairlines */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.26);

  /* text (Vercel gray-1000 / gray-900) */
  --text: #ededed;
  --text-2: #a1a1a1;
  --text-3: rgba(237, 237, 237, 0.52);  /* ~5:1 on --bg (AA for small mono labels) */
  --text-4: rgba(237, 237, 237, 0.22);

  /* brand: primary red (from the logo dot) */
  --accent: #ec3f2a;
  --accent-2: #ff6a52;
  --accent-light: #ff9e8c;
  --accent-soft: rgba(236, 63, 42, 0.14);
  --accent-glow: rgba(236, 63, 42, 0.40);
  --red: var(--accent);
  --red-soft: var(--accent-soft);
  /* ambience only (glows behind renders, never UI signals) */
  --violet: #7c5cff;
  --violet-soft: rgba(124, 92, 255, 0.16);
  --violet-glow: rgba(124, 92, 255, 0.35);
  --green: #3ee08f;          /* success state in UI mocks */

  /* type */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(42px, 5.4vw, 80px);
  --fs-h2: clamp(32px, 3.6vw, 56px);
  --fs-h3: clamp(20px, 1.6vw, 24px);
  --fs-h4: 18px;
  --fs-lead: clamp(16px, 1.2vw, 18px);
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-mono: 11px;

  /* layout */
  --shell: min(1280px, calc(100vw - 48px));
  --gutter: calc((100vw - var(--shell)) / 2);
  --pad: clamp(20px, 2.4vw, 36px);       /* inner cell padding */
  --sec-y: clamp(64px, 7vw, 112px);      /* section vertical rhythm (top; bottom is --sec-y-end) */
  --sec-y-end: calc(var(--sec-y) * .8);  /* the next .sec-bar already separates sections */

  /* radius scale: use these instead of literal px values */
  --r-xs: 4px;              /* checkboxes, tiny chips, code tokens */
  --r-sm: 8px;              /* buttons, tags, pills-in-UI, inputs, small tiles */
  --r: 12px;                /* UI windows, cards, panels */
  --r-lg: 16px;             /* outer frames, hero/product shells */
  --r-pill: 999px;
  --radius: var(--r);       /* legacy aliases */
  --radius-lg: var(--r-lg);
  --nav-h: 64px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo-ish */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (max-width: 767px) {
  :root {
    --shell: calc(100vw - 32px);
    --fs-body: 15px;
    --nav-h: 58px;
  }
}