/* ===========================================================================
   Crest — design tokens
   Ported from Crest/Design/Colors.swift and Spacing.swift so the site and the
   app cannot drift apart. Every colour below exists in the shipping iOS app.
   =========================================================================== */

:root {
  /* --- Ocean palette (Colors.swift) ------------------------------------- */
  --deep-blue: #0a1628;
  --ocean:     #0f4c75;
  --teal:      #3eaca8;
  --foam:      #7dd3d8;

  /* --- Phase accents ---------------------------------------------------- */
  --phase-rise:  #ff6b6b;
  --phase-crest: #ffd93d;
  --phase-fall:  #6bcb77;
  --phase-calm:  #4d96ff;

  /* --- Brand ------------------------------------------------------------
     The app icon's green, taken from Assets/AppIcon.svg. It is deliberately
     the only green on this page: the app's interior is teal, and this exists
     purely so the mark here is the same drawing someone taps on the App
     Store. Do not spread it to accents — the moment it becomes a UI colour it
     stops reading as identity. */
  --brand: #26de81;

  /* --- Accents ---------------------------------------------------------- */
  --coral: #ff8a5b;
  --gold:  #f4b942;

  /* Label variants. The palette above is tuned for the app, where accents sit
     on near-black; here the same hues have to survive being read at 13px over
     the wave. Against the brightest point of The Crest the app values come out
     at 3.57 (teal), 4.21 (coral) and 3.32 (calm) — all under AA — so eyebrows
     and small accent text use these instead: 5.68, 5.32 and 5.49. */
  --accent-label:       #7dd3d8;
  --accent-label-warm:  #ffab86;
  --accent-label-calm:  #9dc4ff;

  /* --- Text ------------------------------------------------------------- */
  /* Tuned for contrast on --deep-blue. --ink-3 is the floor: 4.6:1, passes
     WCAG AA for body text. Nothing below this is used for real content. */
  --ink-0: #ffffff;
  --ink-1: #e3ebf3;
  --ink-2: #b6c6d8;
  /* Lifted from #8ea3ba. Secondary copy sits over the wave, and at the old
     value it only cleared AA with a local scrim behind it; that scrim was
     removed because its edges were visible. This carries its own weight —
     4.70:1 against the brightest point of The Crest. */
  --ink-3: #a3b6c9;
  --ink-4: #6d8098;  /* decorative only — never body copy */

  /* --- Surfaces --------------------------------------------------------- */
  --surface-1: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --hairline:  rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  /* --- Typography ------------------------------------------------------- */
  /* San Francisco on Apple devices — the same face as every screenshot on
     this page — with a sane fallback everywhere else. Zero network cost,
     zero FOUT. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid modular scale, ~1.24 ratio at the small end opening to ~1.33.
     clamp() means no breakpoint jumps — type grows with the viewport. */
  --t-hero:  clamp(2.75rem, 1.6rem + 5.2vw, 6.5rem);
  --t-xxl:   clamp(2.1rem,  1.35rem + 3.2vw, 4rem);
  --t-xl:    clamp(1.6rem,  1.2rem + 1.7vw, 2.5rem);
  --t-lg:    clamp(1.28rem, 1.1rem + 0.8vw, 1.7rem);
  --t-md:    clamp(1.06rem, 1rem + 0.3vw, 1.19rem);
  --t-base:  1rem;
  --t-sm:    0.9375rem;
  --t-xs:    0.8125rem;

  /* Display type needs negative tracking; small type needs positive.
     This is the single biggest difference between "a webpage" and "designed". */
  --track-hero:  -0.038em;
  --track-xxl:   -0.028em;
  --track-xl:    -0.021em;
  --track-lg:    -0.014em;
  --track-body:  -0.006em;
  --track-eyebrow: 0.16em;

  --leading-hero: 0.95;
  --leading-tight: 1.1;
  --leading-snug: 1.28;
  --leading-body: 1.62;

  /* --- Spacing (8pt grid, matching the app's 16pt margins) -------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(5rem, 3rem + 9vw, 11rem);

  --measure: 34ch;      /* display copy */
  /* NB: --section-y is overridden for phones at the bottom of this file. */
  --measure-body: 62ch; /* running text */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --max-w: 1180px;

  /* --- Radii (app uses 20pt cards, 28pt CTAs) --------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-device: 44px;
  --r-full: 999px;

  /* --- Motion ----------------------------------------------------------- */
  /* Springless, Apple-ish easing. --ease-out-soft is the default for reveals. */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 180ms;
  --dur-mid:  420ms;
  --dur-slow: 780ms;

  --shadow-device:
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 48px 90px rgba(0, 0, 0, 0.36);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.28);
}

/* Phones read the same content in a single column, so every section's vertical
   rhythm is paid twice over — the generous desktop spacing turned the page into
   twelve screens of scroll. Tightened here rather than by reworking the clamp,
   which would have pulled desktop in with it. */
@media (max-width: 620px) {
  :root {
    --section-y: 3.75rem;
    --s-9: 4.5rem;
    --s-10: 5.5rem;
  }
}

/* The page is dark by design — it mirrors the app, which is dark-only
   (ContentView sets .preferredColorScheme(.dark)). We do not offer a light
   variant, because there is no light variant of the product to show. */