/* ============================================================================
 *  tokens.css — design system for Genius Wireless & Computer (Hampton, VA).
 *  Builds on generated brand.css. OKLCH throughout.
 *
 *  Identity: TRUSTWORTHY TECH COUNTER. Deep navy-slate ink on a cool near-white,
 *  a confident azure-blue for action, an electric cyan "signal" for fine detail
 *  (rules, nodes, the chip mark), and a mono micro-label voice that reads like a
 *  clean diagnostic readout. Squared radii + a faint circuit dot-grid. Distinct
 *  from the warm salon (Bricolage/oat/clay) and the dark vape shop (Space Grotesk).
 * ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/sora.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}

:root {
  /* ---- Colour (brand.css supplies --ink/--bg/--muted/--accent) ---------- */
  --paper:        var(--bg);                     /* cool near-white page */
  --slate:        var(--ink);                    /* deep navy-slate ink */

  --azure:        var(--accent);                 /* confident royal-azure — CTAs */
  --azure-700:    oklch(45% 0.15 256);           /* azure that reads as text/links (≈7:1) */
  --azure-300:    oklch(80% 0.07 250);           /* soft azure — borders/decor */
  --azure-100:    oklch(95% 0.026 248);          /* azure wash — section tint */
  --azure-50:     oklch(97.6% 0.012 246);

  --cyan:         oklch(72% 0.14 215);           /* electric cyan signal — rules, nodes, mark glow */
  --cyan-deep:    oklch(58% 0.13 215);           /* cyan that's visible as detail on light */
  --star:         oklch(58% 0.13 215);           /* cyan rating stars — cohesive with the signal */

  --navy:         oklch(26% 0.045 258);          /* deep navy — dark bands (CTA, footer) */
  --navy-deep:    oklch(20% 0.04 260);           /* deeper navy pocket */

  --surface:      oklch(99.5% 0.003 240);        /* cards lift off the cool ground */
  --surface-sink: oklch(96.2% 0.008 246);        /* faintly cool sunk panel */

  --line:         oklch(90% 0.012 250);          /* cool hairline */
  --line-strong:  oklch(82% 0.02 250);

  /* ---- Type ------------------------------------------------------------- */
  --font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;

  --step--1: clamp(0.833rem, 0.80rem + 0.16vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.075rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.36vw, 1.40rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.60vw, 1.86rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.95vw, 2.48rem);
  --step-4:  clamp(2.07rem, 1.78rem + 1.45vw, 3.30rem);
  --step-5:  clamp(2.49rem, 2.04rem + 2.24vw, 4.39rem);
  --step-6:  clamp(2.92rem, 2.12rem + 3.95vw, 5.90rem);

  /* ---- Space ------------------------------------------------------------ */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.47rem + 0.11vw, 0.625rem);
  --space-xs:  clamp(0.75rem, 0.71rem + 0.16vw, 0.94rem);
  --space-s:   clamp(1.00rem, 0.95rem + 0.22vw, 1.25rem);
  --space-m:   clamp(1.50rem, 1.42rem + 0.33vw, 1.875rem);
  --space-l:   clamp(2.00rem, 1.89rem + 0.54vw, 2.50rem);
  --space-xl:  clamp(3.00rem, 2.78rem + 1.09vw, 4.00rem);
  --space-2xl: clamp(4.00rem, 3.67rem + 1.63vw, 5.50rem);
  --space-3xl: clamp(6.00rem, 5.45rem + 2.72vw, 8.00rem);

  /* ---- Radius / shadow / layout / motion — squared, tech feel ----------- */
  --r-sm: 7px;
  --r:    var(--radius, 12px);
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-1:
    0 1px 1px oklch(26% 0.045 258 / 0.05),
    0 4px 12px oklch(26% 0.045 258 / 0.07);
  --shadow-2:
    0 2px 4px oklch(26% 0.045 258 / 0.06),
    0 14px 30px oklch(26% 0.045 258 / 0.12),
    0 34px 56px oklch(26% 0.045 258 / 0.08);
  --shadow-azure: 0 12px 32px oklch(52% 0.18 255 / 0.30);

  /* faint circuit dot-grid — used as a background texture on hero/bands */
  --grid-dot: oklch(52% 0.18 255 / 0.08);

  --container: 1180px;
  --container-wide: 1340px;
  --measure: 64ch;

  --dur: 240ms;
  --dur-slow: 600ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}