/* AV LNCH — public design tokens
   Phase 3 polish redesign — Ice + Flame on dark
   Generated 2026-05-05 — unified from 3 Claude.ai design ZIPs */

:root {
  /* ──────────────  Color  ────────────── */
  /* Primary palette — Ice + Flame on dark */
  --ice:        #7dd3fc;       /* sky-300 — primary accent */
  --ice-1:      #38bdf8;       /* darker for active states */
  --ice-hi:     #bae6fd;       /* lighter for hover/highlights */
  --ice-glow:   rgba(125, 211, 252, 0.18);

  --flame:      #fb923c;       /* orange-400 — secondary accent */
  --flame-1:    #f97316;       /* darker */
  --flame-hi:   #fdba74;       /* lighter */
  --flame-glow: rgba(251, 146, 60, 0.20);

  /* Surfaces — near-black, slight cool bias */
  --bg:         #0a0b0d;       /* page background */
  --surface:    #111318;       /* cards, sidebar */
  --surface-2:  #1a1d24;       /* nested elements */
  --surface-3:  #232730;       /* deeper nesting */

  /* Lines */
  --line:       rgba(255, 255, 255, 0.08);
  --line-2:     rgba(255, 255, 255, 0.14);

  /* Text */
  --text:       #f2f4f8;       /* primary */
  --text-1:     #c8cdd6;       /* secondary */
  --text-2:     #8a92a0;       /* muted */
  --text-3:     #5a6170;       /* very muted */

  /* State colors (sparing on public pages) */
  --st-pending:    #fbbf24;    /* yellow */
  --st-fulfilled:  #34d399;    /* green */
  --st-invoiced:   #60a5fa;    /* blue */
  --st-done:       #a78bfa;    /* purple */
  --st-blocked:    #f87171;    /* red */

  /* ──────────────  Spacing scale (4px base)  ────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ──────────────  Radii  ────────────── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ──────────────  Shadows  ────────────── */
  --sh-card:     0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.32);
  --sh-flame:    0 0 0 1px rgba(251, 146, 60, 0.6), 0 12px 40px rgba(251, 146, 60, 0.18);
  --sh-ice:      0 0 0 1px rgba(125, 211, 252, 0.4), 0 12px 40px rgba(125, 211, 252, 0.14);
  --sh-3:        0 16px 48px rgba(0, 0, 0, 0.42);

  /* ──────────────  Layout  ────────────── */
  --container: 1200px;
  --max-w:     1200px;
  --nav-h:     60px;

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

  /* ──────────────  Easing  ────────────── */
  --e-out: cubic-bezier(.2, .7, .2, 1);

  /* ──────────────  Polar Editorial — storefront 2026-05-13  ────────────── */
  --bg-midnight:    #0a1020;     /* deep midnight base — storefront only */
  --bg-midnight-2:  #0e1424;     /* tile interior gradient stop */
  --bg-midnight-3:  #131b2e;     /* tile interior gradient start */
  --text-snow:      #e8eef9;     /* primary text, cool white */
  --text-snow-2:    #bac5d9;     /* secondary, muted cool */
  --text-snow-3:    #6b7896;     /* tertiary, very muted */
  --line-ice:       rgba(125, 211, 252, 0.10);   /* subtle ice hairlines */
  --line-ice-2:     rgba(125, 211, 252, 0.25);   /* hover/highlight ice borders */
  --aurora-cyan:    rgba(125, 211, 252, 0.32);   /* hero right-top glow */
  --aurora-flame:   rgba(251, 146, 60, 0.18);    /* hero bottom-left warm glow */
  --aurora-indigo:  rgba(165, 180, 252, 0.18);   /* secondary glow left-top */
}

/* ──────────────  Reset / base  ────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: rgba(251, 146, 60, 0.4); color: var(--text); }

/* ──────────────  Common utilities  ────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "tnum";
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--flame);
}
.section-h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 12px 0 16px;
}
.section-lead {
  color: var(--text-1);
  font-size: clamp(16px, 1.6vw, 19px);
  max-width: 680px;
  line-height: 1.55;
}

/* ──────────────  Reveal on scroll  ────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--e-out), transform 500ms var(--e-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────────  Reduced motion  ────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}