/* =========================================================================
   ATHLETES ACCELERATION — BRAND TOKENS
   Generated artifact. Source of truth is ./DESIGN.md — do not hand-edit.

   Canonical surface: the CAMPAIGN system (advertorials, location quizzes,
   Westfield, Multi-Sport). Light canvas, one red from the metallic logo,
   Anton display / Geist body / JetBrains Mono data.

   NOT the athletesaccel.com marketing site (pure black, #ed1c24, Open Sans
   900 italic). That is a separate legacy surface — see reference/.

   FONTS: self-hosted. The working copies live at
   clients/Athletes Acceleration/advertorials/_shared/fonts/
   (Anton-Regular.ttf, Geist-Variable.ttf, JetBrainsMono-Variable.ttf).
   Adjust the @font-face paths below to wherever you mount them.
   ========================================================================= */

@font-face {
  font-family: 'Anton';
  src: url('./fonts/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-Variable.ttf') format('truetype-variations'),
       url('./fonts/Geist-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Variable.ttf') format('truetype-variations'),
       url('./fonts/JetBrainsMono-Variable.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =========================
     BRAND RED. Full ramp so tints are never invented ad hoc.
     ========================= */
  --aa-red-50:  #fff1f1;
  --aa-red-100: #ffdede;
  --aa-red-200: #ffc2c2;
  --aa-red-300: #ff8e8e;
  --aa-red-400: #f55757;
  --aa-red-500: #e02828;  /* base                                  */
  --aa-red-600: #c4141d;  /* PRIMARY. Matches the metallic logo.   */
  --aa-red-700: #a30f17;  /* hover / pressed                       */
  --aa-red-800: #821016;
  --aa-red-900: #5e0b10;

  --aa-red:        var(--aa-red-600);
  --aa-red-deep:   var(--aa-red-800);
  --aa-red-bright: var(--aa-red-500);

  /* =========================
     NEUTRALS. Warm-cool graphites, not pure black.
     ========================= */
  --aa-ink-950: #0a0b0d;   /* near-black backgrounds              */
  --aa-ink-900: #15171a;   /* primary dark surface                */
  --aa-ink-800: #1f2227;   /* elevated dark surface               */
  --aa-ink-700: #2c3038;   /* dark borders / hovered dark surface  */
  --aa-ink-600: #434954;   /* muted body on dark                  */
  --aa-ink-500: #6b727f;   /* secondary text                      */
  --aa-ink-400: #969ca7;   /* tertiary text                       */
  --aa-ink-300: #c2c6cd;   /* dividers on light                   */
  --aa-ink-200: #dfe2e7;   /* subtle borders                      */
  --aa-ink-100: #eef0f3;   /* light surface                       */
  --aa-ink-50:  #f6f7f9;   /* PAGE BACKGROUND                     */
  --aa-white:   #ffffff;

  /* =========================
     CHROME. The metallic logo finish.
     A MATERIAL, not a palette. Never use as text or UI color.
     ========================= */
  --aa-chrome-light: #e6e7e9;
  --aa-chrome:       #b7bcc4;
  --aa-chrome-dark:  #6f7682;

  /* Metallic surface treatment, approximating the logo's brushed finish.
     Use on awards, badges, founder labels. Sparingly. */
  --aa-chrome-surface: linear-gradient(
    145deg,
    var(--aa-chrome-light) 0%,
    var(--aa-chrome) 38%,
    var(--aa-chrome-dark) 55%,
    var(--aa-chrome) 72%,
    var(--aa-chrome-light) 100%
  );

  /* =========================
     SEMANTIC / ACCENTS
     ========================= */
  --aa-success: #15a34a;   /* PRs, gains, "+1 mph" up-arrows       */
  --aa-warning: #f59e0b;   /* schedule conflicts                   */
  --aa-danger:  var(--aa-red-600);
  --aa-info:    #1d6fb8;   /* informational data callouts          */
  --aa-turf:    #2f6a3a;   /* field green. Sport context ONLY.     */

  /* =========================
     SEMANTIC TOKENS. Light is the default.
     ========================= */
  --fg-1:      var(--aa-ink-950);
  --fg-2:      var(--aa-ink-700);
  --fg-3:      var(--aa-ink-500);
  --fg-muted:  var(--aa-ink-400);
  --fg-on-red: var(--aa-white);

  --bg-1:       var(--aa-white);     /* card / elevated surface     */
  --bg-2:       var(--aa-ink-50);    /* page background             */
  --bg-3:       var(--aa-ink-100);   /* section tint                */
  --bg-inverse: var(--aa-ink-950);

  --border-1: var(--aa-ink-200);
  --border-2: var(--aa-ink-300);
  --border-strong: var(--aa-ink-900);

  --link:       var(--aa-red-600);
  --link-hover: var(--aa-red-700);

  /* =========================
     TYPE FAMILIES
     ========================= */
  --font-display: 'Anton', 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* =========================
     TYPE SCALE
     ========================= */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  64px;
  --fs-5xl:  96px;
  --fs-hero: clamp(64px, 11vw, 168px);

  /* =========================
     SPACING (8pt-ish, tighter at the low end)
     ========================= */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* =========================
     RADII. Squared or barely softened. Never overly round.
     ========================= */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;    /* buttons */
  --r-lg:   8px;    /* cards   */
  --r-xl:   12px;
  --r-pill: 999px;  /* tags only */

  /* =========================
     ELEVATION. Negative spread keeps shadows tight.
     ========================= */
  --shadow-1: 0 1px 2px rgba(15, 17, 21, 0.06);
  --shadow-2: 0 2px 8px rgba(15, 17, 21, 0.08), 0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-3: 0 12px 32px -8px rgba(15, 17, 21, 0.18), 0 2px 6px rgba(15, 17, 21, 0.06);
  --shadow-4: 0 28px 64px -16px rgba(15, 17, 21, 0.28);
  --shadow-red: 0 8px 24px -8px rgba(196, 20, 29, 0.45);  /* CTA hover only */
  --inner-1: inset 0 1px 0 rgba(255, 255, 255, 0.08);     /* top edge of dark surfaces */

  /* =========================
     MOTION. Quick and confident. No bounce, no overshoot.
     ========================= */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:   cubic-bezier(0.6, 0.0, 0.8, 0.3);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =========================================================================
   BASE
   ========================================================================= */
body {
  background: var(--bg-2);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
}

/* =========================================================================
   TYPE
   Anton shouts. Geist explains. Mono carries every number.
   ========================================================================= */
.aa-display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;          /* Anton has one weight; tracking carries emphasis */
  letter-spacing: -0.005em;
  line-height: 0.9;
  text-transform: uppercase;
  color: inherit;
}

.aa-hero, h1 {
  font-size: var(--fs-hero);
  line-height: 0.85;
  letter-spacing: -0.01em;
}

h2 { font-size: var(--fs-4xl); line-height: 0.9; }
h3 { font-size: var(--fs-2xl); line-height: 1.0; letter-spacing: 0; }

h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

p { color: var(--fg-2); max-width: 70ch; }

small, .aa-small { font-size: var(--fs-sm); color: var(--fg-3); }

/* Eyebrow / section label. Mono, red, wide tracking. */
.aa-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aa-red-600);
  font-weight: 500;
}
.aa-eyebrow--muted { color: var(--fg-3); }

/* THE signature device. Renders as "// Find Your Starting Line". */
.aa-code-comment {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-3);
  font-weight: 400;
}
.aa-code-comment::before { content: "// "; opacity: 0.5; }

/* Every metric goes here. Tabular figures so digits align in a column. */
.aa-data {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

code, kbd, pre, .aa-mono { font-family: var(--font-mono); }

/* Two-tone display word. One device per headline, never both. */
.aa-display .accent, h1 .accent, h2 .accent { color: var(--aa-red-600); }

/* Outline display word. The stadium-signage treatment. */
.aa-display .outline, h1 .outline, h2 .outline {
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
}

/* =========================================================================
   COMPONENTS
   ========================================================================= */
.aa-btn-primary {
  background: var(--aa-red-600);
  color: var(--fg-on-red);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--s-4) var(--s-6);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.aa-btn-primary:hover {
  background: var(--aa-red-700);
  box-shadow: var(--shadow-red);
}
.aa-btn-primary:focus-visible {
  outline: 2px solid var(--aa-red-600);
  outline-offset: 2px;
}

.aa-btn-ghost {
  background: var(--bg-1);
  color: var(--fg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-6);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.aa-btn-ghost:hover { border-color: var(--border-strong); }

.aa-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.aa-card:hover { box-shadow: var(--shadow-2); }

/* Inverse card. The inner sheen keeps near-black from reading as a flat void. */
.aa-card--inverse {
  background: var(--bg-inverse);
  color: var(--aa-white);
  border: none;
  box-shadow: var(--inner-1), var(--shadow-2);
}

/* The signature data callout: mono eyebrow, huge mono number, Geist caption. */
.aa-stat__value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  line-height: 1;
}
.aa-stat__caption { font-size: var(--fs-sm); color: var(--fg-3); }

/* Metallic finish. Awards, badges, founder labels. Sparingly. */
.aa-chrome-badge {
  background: var(--aa-chrome-surface);
  color: var(--aa-ink-900);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aa-input {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--fg-1);
  width: 100%;
}
.aa-input:focus-visible {
  border-color: var(--aa-red-600);
  outline: 2px solid var(--aa-red-600);
  outline-offset: 1px;
}
.aa-input[aria-invalid='true'] { border-color: var(--aa-danger); }

/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .aa-btn-primary, .aa-btn-ghost, .aa-card { transition: none; }
}