/* ═══════════════════════════════════════════════════════════════════════════
   ACTUAL FOOTY · SHARED DESIGN SYSTEM  (af-system.css)
   ───────────────────────────────────────────────────────────────────────────
   The public platform grew as 11+ hand-authored pages, each inlining its own
   <style> and re-declaring the same brand four different ways — so every mobile
   fix had to be copy-pasted per file. This is the ONE source of truth: a fluid
   type scale, spacing / radius / breakpoint / tap-target / motion scales, and a
   small set of primitives, so any surface can be built or migrated to a single,
   consistent, phone-first system.

   HOW IT'S WIRED (build_site.py): baked to /af-system.css and <link>-ed EARLY in
   every page's <head> — before each page's own inline <style>. That ordering is
   deliberate and load-bearing: a page's inline rules still WIN, so shipping this
   file regresses nothing. It ADDS a namespaced system (everything is `--af-*` /
   `.af-*`, colliding with no existing token or class) that new + migrated code
   opts into.

   ADOPTION: reach for `--af-text-*` / `--af-space-*` / `.af-btn` / `.af-field`
   instead of fresh px values. Migrate a page by deleting its bespoke tokens and
   pointing at these. Do it surface-by-surface; never a big-bang.

   BREAKPOINTS (CSS vars can't be used in @media, so they live here as the
   canonical set — use these three, don't invent new ones):
       phone   ≤ 560px      tablet  ≤ 760px      desktop ≥ 1024px
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Type · one fluid, mobile-first modular scale (clamp: min @360px → max
     @~1280px). Nothing else defines these, so they're safe to use anywhere and
     they scale with the viewport AND the user's text-size setting. ── */
  --af-text-xs:    clamp(11px, 10.4px + 0.18vw, 12px);
  --af-text-sm:    clamp(12px, 11.2px + 0.35vw, 14px);
  --af-text-base:  clamp(15px, 14.3px + 0.35vw, 16px);   /* body · ≥16px kills iOS input zoom */
  --af-text-lg:    clamp(17px, 15.6px + 0.7vw, 19px);
  --af-text-xl:    clamp(20px, 17.2px + 1.3vw, 24px);
  --af-text-2xl:   clamp(24px, 19.6px + 2.1vw, 32px);
  --af-text-3xl:   clamp(29px, 22.5px + 3.1vw, 44px);
  --af-text-4xl:   clamp(37px, 26px + 5.4vw, 64px);
  --af-text-display: clamp(46px, 28px + 9vw, 112px);      /* hero wordmark */

  --af-leading-tight: 1.05;
  --af-leading-snug:  1.3;
  --af-leading-body:  1.55;
  --af-tracking-caps: 0.14em;   /* the platform's uppercase eyebrows / labels */

  /* ── Type families (the font files themselves are baked to /fonts by
     build_site.py; these just name the stacks per THE FONT LAW). ── */
  --af-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;   /* headlines · names · numbers */
  --af-font-body:    "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;  /* copy */

  /* ── Spacing · 8pt-based rhythm ── */
  --af-space-1: 4px;   --af-space-2: 8px;   --af-space-3: 12px;  --af-space-4: 16px;
  --af-space-5: 24px;  --af-space-6: 32px;  --af-space-7: 48px;  --af-space-8: 64px;  --af-space-9: 96px;

  /* ── Radius ── */
  --af-radius-sm: 8px;  --af-radius-md: 12px;  --af-radius-lg: 16px;  --af-radius-xl: 22px;  --af-radius-pill: 999px;

  /* ── Touch · WCAG 2.5.5 / Apple HIG minimum. Every tappable primitive honours it. ── */
  --af-tap: 44px;

  /* ── Elevation ── */
  --af-shadow-1: 0 1px 3px rgba(0,0,0,.28);
  --af-shadow-2: 0 8px 24px rgba(0,0,0,.34);
  --af-shadow-3: 0 20px 56px rgba(0,0,0,.46);

  /* ── Motion · one easing + duration set; honour reduced-motion below. ── */
  --af-ease: cubic-bezier(.4, 0, .2, 1);
  --af-dur-fast: .12s;  --af-dur: .18s;  --af-dur-slow: .3s;

  /* ── Z-index · names the existing /app stacking landscape so new overlays
     slot in deliberately instead of racing to 99999. ── */
  --af-z-nav: 40;  --af-z-drawer: 50;  --af-z-sheet: 99;  --af-z-modal: 200;  --af-z-toast: 300;

  /* ── Colour · documents the values already in public use (this file does NOT
     rebrand — brand changes are founder-gated). Two cyans exist in the estate:
     the public site's #23C7F6 (canonical here) and the dark-cockpit brand-bible
     #00E5FF (--af-cyan-cockpit); reconciling them is a separate, signed-off
     follow-up. New public-surface work should use --af-cyan. ── */
  --af-cyan: #23C7F6;
  --af-cyan-cockpit: #00E5FF;
  --af-lime: #C6FF00;
  --af-magenta: #E500FF;          /* AFLW accent */
  --af-ink: #0A0D12;              /* master ink / darkest surface */
  --af-ink-2: #161B23;
  --af-paper: #EFEBDD;            /* warm reading surface (marketing) */
  --af-white: #FFFFFF;
  --af-grey: #8FA3B8;
  --af-line: rgba(255,255,255,.10);
  --af-line-2: rgba(255,255,255,.16);

  /* Safe-area passthroughs for notch/home-indicator insets. */
  --af-safe-top: env(safe-area-inset-top, 0px);
  --af-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ══════════════════════════ PRIMITIVES ══════════════════════════
   All `.af-*` — collide with nothing existing. Opt in per element. */

/* Constrained, phone-first content column. */
.af-container { width: 100%; max-width: 1040px; margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px); }

/* Button · 44px tap floor, display font, keyboard-visible focus ring. */
.af-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--af-space-2);
  min-height: var(--af-tap); padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--af-radius-md);
  font-family: var(--af-font-display); font-weight: 800; font-size: var(--af-text-sm);
  line-height: 1; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--af-dur) var(--af-ease), box-shadow var(--af-dur) var(--af-ease),
              border-color var(--af-dur) var(--af-ease), color var(--af-dur) var(--af-ease),
              background var(--af-dur) var(--af-ease);
}
.af-btn:active { transform: translateY(1px) scale(.99); }
.af-btn--primary { background: var(--af-cyan); color: #04121a; box-shadow: 0 10px 30px rgba(35,199,246,.30); }
.af-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(35,199,246,.42); }
.af-btn--ghost { background: rgba(255,255,255,.03); border-color: var(--af-line-2); color: var(--af-paper); }
.af-btn--ghost:hover { border-color: var(--af-cyan); color: var(--af-cyan); }
.af-btn--block { width: 100%; }

/* Form field · 44px, ≥16px text so iOS never zooms the viewport on focus. */
.af-field { display: flex; flex-direction: column; gap: var(--af-space-2); }
.af-label { font-family: var(--af-font-display); font-weight: 700; font-size: var(--af-text-xs);
  letter-spacing: var(--af-tracking-caps); text-transform: uppercase; color: var(--af-grey); }
.af-input {
  width: 100%; min-height: var(--af-tap); padding: 12px 14px;
  font-family: var(--af-font-body); font-size: 16px; line-height: 1.3; color: var(--af-white);
  background: rgba(255,255,255,.04); border: 1px solid var(--af-line-2);
  border-radius: var(--af-radius-sm); -webkit-appearance: none; appearance: none;
  transition: border-color var(--af-dur) var(--af-ease), box-shadow var(--af-dur) var(--af-ease);
}
.af-input::placeholder { color: rgba(255,255,255,.38); }
.af-input:focus { outline: none; border-color: var(--af-cyan);
  box-shadow: 0 0 0 3px rgba(35,199,246,.22); }

/* Keyboard-only focus ring utility (mouse clicks stay clean). */
.af-focus:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(35,199,246,.5); border-radius: var(--af-radius-sm); }

/* Safe-area helpers for fixed edges (bottom bars, headers). */
.af-safe-bottom { padding-bottom: var(--af-safe-bottom); }
.af-safe-top { padding-top: var(--af-safe-top); }

/* Accessible-hidden (label text for icon-only controls). */
.af-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Respect the user's motion preference — scoped to the system's own animations. */
@media (prefers-reduced-motion: reduce) {
  .af-btn, .af-input { transition: none; }
  .af-btn:active, .af-btn--primary:hover { transform: none; }
}
