/* ════════════════════════════════════════════════════════════
   STRIDE — Locked design tokens (Ink Coral)
   Source of truth: matches /Stride Screen Design/shared.css
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ─── Brand colors ─── */
  --ink:             #1B2138;
  --ink-2:           #2D3555;
  --ink-grad:        linear-gradient(135deg, #1B2138 0%, #2D3555 100%);
  --ink-90:          rgba(27, 33, 56, 0.90);
  --ink-70:          rgba(27, 33, 56, 0.70);
  --ink-50:          rgba(27, 33, 56, 0.50);
  --ink-30:          rgba(27, 33, 56, 0.30);
  --ink-15:          rgba(27, 33, 56, 0.15);
  --ink-08:          rgba(27, 33, 56, 0.08);
  --ink-04:          rgba(27, 33, 56, 0.04);

  --coral:           #E07A5F;
  --coral-dark:      #C4613F;
  --coral-light:     #F4A68E;
  --coral-bg:        #FDE8E0;
  --coral-bg-subtle: rgba(224, 122, 95, 0.08);

  --warm-white:      #FEFCF9;
  --cream:           #FAF6EF;
  --inset:           #F5F1EA;
  --white:           #FFFFFF;

  --slate:           #64748B;
  --slate-light:     #94A3B8;
  --slate-lighter:   #CBD5E1;
  --border:          #E2E0DB;

  --teal:            #3D8B8B;
  --green:           #2D9C4A;

  /* ─── Typography ─── */
  --font-heading: 'Albert Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ─── Type scale (landing) ─── */
  --t-mega:    clamp(48px, 9vw, 140px);
  --t-huge:    clamp(40px, 6.5vw, 96px);
  --t-display: clamp(34px, 5vw, 72px);
  --t-h1:      clamp(28px, 3.6vw, 48px);
  --t-h2:      clamp(22px, 2.4vw, 32px);
  --t-h3:      clamp(18px, 1.6vw, 22px);
  --t-body-lg: clamp(17px, 1.2vw, 19px);
  --t-body:    16px;
  --t-small:   14px;
  --t-micro:   12px;

  /* ─── Spacing ─── */
  --s-4:  4px;
  --s-8:  8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;
  --s-80: 80px;
  --s-120: 120px;
  --s-160: 160px;

  /* ─── Radii ─── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-3xl: 40px;
  --r-full: 999px;
  --r-device: 44px;

  /* ─── Shadows ─── */
  --shadow-sm:    0 1px 2px rgba(27,33,56,0.06);
  --shadow-md:    0 4px 12px rgba(27,33,56,0.08);
  --shadow-lg:    0 8px 24px rgba(27,33,56,0.12);
  --shadow-xl:    0 16px 48px rgba(27,33,56,0.16);
  --shadow-phone: 0 25px 60px rgba(27,33,56,0.18), 0 60px 120px rgba(27,33,56,0.12);
  --shadow-coral: 0 8px 24px rgba(224, 122, 95, 0.35);

  /* ─── Easings ─── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-quart:  cubic-bezier(0.77, 0, 0.175, 1);

  /* ─── Layout ─── */
  --container:     1240px;
  --container-narrow: 920px;

  /* ─── Device — iPhone 17 Pro body proportions ───
     Real device: 149.6 × 71.5 mm → aspect 2.092 (body, not just display).
     The 402×874 logical-display values matched the SCREEN area, which made
     the framed mock look ~4% taller than the real phone. 402×841 matches
     the actual body silhouette. */
  --device-w:  402px;
  --device-h:  841px;
}

/* ════════════════════════════════════════════════════════════
   RESET
   ════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--warm-white);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }

/* ────── Selection ────── */
::selection { background: var(--coral); color: var(--white); }

/* ────── Focus ────── */
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════ */

/* Tighten the vertical-rhythm scale on narrow viewports so sections
   don't bleed huge empty bands on phones. */
@media (max-width: 760px) {
  :root {
    --s-48:  32px;
    --s-64:  40px;
    --s-80:  52px;
    --s-120: 64px;
    --s-160: 80px;
  }
}
@media (max-width: 480px) {
  :root {
    --s-48:  28px;
    --s-64:  32px;
    --s-80:  44px;
    --s-120: 56px;
    --s-160: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}