/* ============================================================
   Escape — design tokens
   Marketing site (escapethegrip.com)
   ============================================================
   Single source of truth for color, type, space, radii, motion.
   Keep this file unopinionated about layout — semantic helpers
   live below the token block.
   ============================================================ */

/* Fonts: system stack only — no remote @import (perf).
   - Sans: SF Pro on Apple devices, system-ui everywhere else
   - Serif: native iowan/charter/georgia (italic only, used sparingly) */

:root {
  /* ---------- Color: surfaces ---------- */
  /* synced with iOS app — Escape/Utilities/EscapeColors.swift (Oct 2026) */
  --bg:           #0B0B0E;          /* marketing default — .escapeBackground */
  --bg-elev:      #15151A;          /* card / nav glass base — .escapeSurface */
  --bg-blog:      #1A1A1E;          /* blog reading view */
  --bg-overlay:   rgba(11, 11, 14, 0.72); /* sticky nav */

  /* ---------- Color: ink ---------- */
  --ink-1:        #FFFFFF;          /* primary — .escapePrimaryText */
  --ink-2:        #A1A1AA;          /* secondary — .escapeSecondaryText */
  --ink-3:        #6B6B75;          /* tertiary — .escapeTertiaryText */
  --ink-4:        #4A4A52;          /* faintest, captions */
  --ink-blog:     #EDE8DC;          /* warm off-white reading text */
  --ink-blog-2:   #B8B3A8;          /* warm secondary on blog */

  /* ---------- Color: accent ---------- */
  --blue:         #4DA3FF;          /* .escapeAccent — lighter, iOS-system */
  --blue-hi:      #7CBCFF;          /* hover */
  --blue-soft:    rgba(77, 163, 255, 0.12);
  --amber:        #F59E0B;          /* premium / emotional only — web-only */
  --amber-soft:   rgba(245, 158, 11, 0.12);
  --green:        #4ADE80;          /* .escapeSuccess — progress states only */
  --warn:         #F87171;          /* .escapeWarning — administrative */

  /* ---------- Color: hairlines & lines ---------- */
  --line-1:       #1F1F26;          /* .escapeDivider — solid, not alpha */
  --line-2:       rgba(255, 255, 255, 0.10);  /* component edge */
  --line-3:       rgba(255, 255, 255, 0.14);  /* focus */
  --line-blog:    rgba(232, 227, 216, 0.10);  /* blog dividers */

  /* ---------- Type: family (system only — zero font requests) ---------- */
  --font-sans:    -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                  'SF Pro Display', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Iowan Old Style', 'Apple Garamond', Charter, Georgia,
                  'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type: scale (rem on 16px root) ---------- */
  --t-display:    4.5rem;     /* 72 — hero only, one per page */
  --t-h1:         3rem;       /* 48 — section openers */
  --t-h2:         2rem;       /* 32 — sub-section */
  --t-h3:         1.375rem;   /* 22 — cards, list items */
  --t-body-lg:    1.125rem;   /* 18 — hero subhead, intros */
  --t-body:       1rem;       /* 16 — default */
  --t-small:      0.875rem;   /* 14 — caption */
  --t-micro:      0.75rem;    /* 12 — eyebrow, label small caps */
  --t-reading:    1.125rem;   /* 18 — long-form on /blog */
  --t-serif-q:    1.5rem;     /* 24 — pull-quote */

  /* ---------- Type: weight ---------- */
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;

  /* ---------- Type: leading ---------- */
  --lh-tight:     1.1;        /* display, hero */
  --lh-snug:      1.25;       /* H1, H2 */
  --lh-ui:        1.4;        /* UI lines */
  --lh-body:      1.6;        /* body */
  --lh-reading:   1.75;       /* /blog */

  /* ---------- Type: tracking ---------- */
  --tr-tight:     -0.02em;    /* display, H1 */
  --tr-normal:    0;
  --tr-wide:      0.08em;     /* eyebrow micro labels */

  /* ---------- Space — 4px base ---------- */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-8:      32px;
  --space-10:     40px;
  --space-12:     48px;
  --space-16:     64px;
  --space-20:     80px;
  --space-24:     96px;
  --space-32:     128px;
  --space-40:     160px;
  --space-48:     192px;

  /* ---------- Radii ---------- */
  --r-sm:         6px;
  --r-md:         10px;
  --r-lg:         14px;
  --r-xl:         22px;
  --r-pill:       999px;

  /* ---------- Shadow — used very sparingly ---------- */
  --shadow-fall:  0 24px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-card:  0 1px 0 0 rgba(255, 255, 255, 0.04) inset;

  /* ---------- Layout ---------- */
  --container:    1180px;
  --reading:      640px;
  --nav-h:        72px;

  /* ---------- Motion ---------- */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);  /* long soft ease-out */
  --ease-in:      cubic-bezier(0.32, 0, 0.67, 0);
  --d-fast:       180ms;
  --d-base:       320ms;
  --d-slow:       620ms;
  --d-reveal:     800ms;

  /* ---------- Z ---------- */
  --z-nav:        50;
  --z-overlay:    100;
  --z-modal:      200;

  color-scheme: dark;
}

/* ============================================================
   Semantic primitives
   ============================================================
   Use the class form (.eg-display, .eg-h1, …) when an element
   is doing the role of that token. They map cleanly to the
   ramp without demanding restructuring.
   ============================================================ */

html {
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11", "tnum" 0;
}

/* Display — hero, one per page */
.eg-display {
  font-size: clamp(2.75rem, 6.4vw, var(--t-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--w-medium);
  color: var(--ink-1);
  text-wrap: balance;
}

/* H1 — section openers */
.eg-h1 {
  font-size: clamp(2.25rem, 4vw, var(--t-h1));
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  font-weight: var(--w-medium);
  color: var(--ink-1);
  text-wrap: balance;
}

/* H2 — sub-section */
.eg-h2 {
  font-size: clamp(1.625rem, 2.8vw, var(--t-h2));
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: var(--w-medium);
  color: var(--ink-1);
  text-wrap: balance;
}

/* H3 — cards, list items */
.eg-h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-ui);
  font-weight: var(--w-medium);
  color: var(--ink-1);
}

/* Body large — hero subhead, intros */
.eg-body-lg {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Body — default */
.eg-body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* Small — caption */
.eg-small {
  font-size: var(--t-small);
  line-height: var(--lh-ui);
  color: var(--ink-3);
}

/* Eyebrow — uppercase micro label */
.eg-eyebrow {
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Reading — long-form blog body */
.eg-reading {
  font-size: var(--t-reading);
  line-height: var(--lh-reading);
  color: var(--ink-blog);
  font-weight: var(--w-regular);
  text-wrap: pretty;
}

/* Serif italic pull-quote — emotional moments */
.eg-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: clamp(1.25rem, 2.4vw, var(--t-serif-q));
  line-height: 1.45;
  color: var(--ink-1);
  text-wrap: balance;
  letter-spacing: -0.005em;
}

/* Numbers — tabular by default in UI */
.eg-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Links ---------- */
a {
  color: var(--blue);
  text-decoration: none;
  transition: opacity var(--d-fast) var(--ease);
}
a:hover { opacity: 0.7; }
a:focus-visible {
  outline: 1.5px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Selection ---------- */
::selection {
  background: var(--blue);
  color: var(--bg);
}

/* ---------- Hairlines ---------- */
.eg-hairline {
  height: 1px;
  width: 100%;
  background: var(--line-1);
  border: 0;
}

/* ---------- Button — secondary pill ---------- */
.eg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-1);
  font: inherit;
  font-weight: var(--w-medium);
  font-size: var(--t-small);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease),
              background var(--d-fast) var(--ease);
}
.eg-btn:hover { border-color: var(--line-3); }
.eg-btn:active { opacity: 0.6; }

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