/* ============================================================
   TurboBoostTech — Design Tokens
   Single source of truth for all brand values.
   Rules & rationale live in BRANDING.md. This file is what renders.
   Components reference these variables — never hardcode hex.
   ============================================================ */

:root {
  /* ── Surfaces (dark) ─────────────────────────────────────── */
  --bg:                #191919;                  /* page, header, footer — brand frame (OKLCH L~21.5) */
  --surface-sunken:    #000000;                  /* black cards, media wells, premium panels */
  --surface-raised:    rgba(255, 255, 255, 0.04);/* subtle lifted UI; step 0.06 / 0.08 for higher */
  --surface-light:     #ffffff;                  /* economy / light tier + white media (future) */

  /* ── Header (frosted, make this a general frosted style?) ── */
  --header-bg:         rgba(25, 25, 25, 0.72);   /* #191919 @ 72% */
  --header-blur:       blur(20px) saturate(180%);/* saturate keeps content behind vivid, not muddy */
  --header-border:     rgba(255, 255, 255, 0.08);

  /* ── Foreground ──────────────────────────────────────────── */
  --fg-1:              rgba(255, 255, 255, 0.92);/* headings, body */
  --fg-2:              rgba(255, 255, 255, 0.60);/* labels, secondary, captions */
  --fg-3:              rgba(255, 255, 255, 0.38);/* hints, placeholders, disabled */
  --fg-inverse:        #141414;                  /* text on light surfaces + solid white buttons */
  --fg-on-accent:      #ffffff;                  /* label on red fills — PURE white, not --fg-1 */

  /* ── Borders ─────────────────────────────────────────────── */
  --border-subtle:     rgba(255, 255, 255, 0.08);
  --border:            rgba(255, 255, 255, 0.12);
  --border-strong:     rgba(255, 255, 255, 0.18);

  /* ── Accent: red (two-value) ─────────────────────────────── */
  --accent-bright:     #ff3b3b;  /* text, links, outline, icons — DARK surfaces only */
  --accent-fill:       #da161a;  /* solid fill, default        (white 5.1:1) */
  --accent-fill-press: #e02020;  /* press (between)            (white 4.78:1) */
  --accent-fill-hover: #e52825;  /* hover (brightest)          (white 4.50:1) */
  --accent-on-light:   #e02020;  /* red text/links on LIGHT surfaces */

  /* ── Neutral buttons ─────────────────────────────────────── */
  /* solid (white) — dims on interaction; label = --fg-inverse, weight 400 */
  --btn-neutral:           #f4f4f4;
  --btn-neutral-hover:     #e6e6e6;
  --btn-neutral-press:     #d6d6d6;
  /* ghost — ignites; label = --fg-1, weight 400 */
  --btn-ghost-border:        rgba(255, 255, 255, 0.16);
  --btn-ghost-border-active: rgba(255, 255, 255, 0.24);
  --btn-ghost-fill-hover:    rgba(255, 255, 255, 0.06);
  --btn-ghost-fill-press:    rgba(255, 255, 255, 0.10);

  /* ── Spacing (4-based) ───────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-0:    0;
  --radius-1:    4px;   /* chips, tags */
  --radius-2:    8px;   /* buttons, inputs (default) */
  --radius-3:    12px;  /* cards */
  --radius-4:    16px;  /* large cards, modals */
  --radius-5:    24px;  /* media wells */
  --radius-6:    32px;  /* hero panels */
  --radius-full: 9999px;/* pills, avatars */
  --radius-app-icon: 16%; /* scales proportionally, deliberately sharper */
  /* Inner radius rule: inner = outer − gap (padding). Floor at 0. */

  /* ── Type ────────────────────────────────────────────────── */
  --font: 'Helios', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Only Regular + Bold are available. Black (900) reserved for future display use. */
  --weight-regular: 400;  /* body, UI, buttons, labels */
  --weight-bold:    700;  /* headings */
  /* Condensed (if added) is for dense UI only — never the marketing site / footer. */

  /* sizes — rem so they scale with the user's font-size setting (1rem = 16px) */
  --text-xs:   0.75rem;   /* 12 — fine print, labels */
  --text-sm:   0.875rem;  /* 14 — secondary, footer */
  --text-base: 1rem;      /* 16 — body (default) */
  --text-lg:   1.25rem;   /* 20 — lead paragraphs */
  --text-xl:   1.5rem;    /* 24 — h3 */
  --text-2xl:  2rem;      /* 32 — h2 */
  --text-3xl:  2.5rem;    /* 40 — h1 */
  --text-4xl:  3.5rem;    /* 56 — display / hero */
  --text-5xl:  4.5rem;    /* 72 — large hero (optional; consider clamp() for fluid) */

  /* line-heights */
  --leading-tight:   1.1;   /* display, large headings */
  --leading-snug:    1.25;  /* headings */
  --leading-normal:  1.5;   /* body */
  --leading-relaxed: 1.6;   /* long-form */

  /* ── Motion ──────────────────────────────────────────────── */
  --transition:      150ms ease;  /* default hover/press ignite */
  --transition-slow: 300ms ease;
  /* Wrap motion in @media (prefers-reduced-motion: reduce) to disable for those users. */

  /* ── Focus ring (use on :focus-visible, not :focus) ──────── */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-bright);

  /* ── Layout ──────────────────────────────────────────────── */
  --container:      1120px;  /* max content width */
  --container-nav: 1080px;
  --container-narrow: 1040px;
  --container-wide: 1320px;

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-header:   100;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;

  /* ── State ───────────────────────────────────────────────── */
  --disabled-opacity: 0.4;
}

/* Breakpoints (CSS vars can't be used in @media — hardcode these in queries):
   sm 640px · md 768px · lg 1024px · xl 1280px */