/* ============================================================
   Apex Fit Digital — Design Tokens
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ---------- COLOR — RAW ---------- */
  /* Ink (background) */
  --ink-1000: #060607;
  --ink-900:  #0B0B0C;
  --ink-800:  #131316;
  --ink-700:  #1C1C20;
  --ink-600:  #2A2A30;
  --ink-500:  #3A3A42;
  --ink-400:  #6B6B75;
  --ink-300:  #9A9AA3;
  --ink-200:  #C7C7CD;
  --ink-100:  #E8E8EB;
  --ink-50:   #F5F5F7;
  --ink-0:    #FFFFFF;

  /* Brand — Volt (primary accent: lime/yellow neon) */
  --volt-700: #B8CC2E;
  --volt-600: #D6F040;
  --volt-500: #E8FF59;   /* primary */
  --volt-400: #EFFF7F;
  --volt-300: #F4FFA3;
  --volt-100: #F9FFD6;

  /* Brand — Pulse (secondary: hot magenta) */
  --pulse-700: #C9264D;
  --pulse-600: #E63465;
  --pulse-500: #FF3366;   /* secondary */
  --pulse-400: #FF5A85;
  --pulse-300: #FF8AAB;
  --pulse-100: #FFD6E0;

  /* Semantic */
  --success: #4ADE80;
  --warn:    #FBBF24;
  --danger:  #FF3366;
  --info:    #7DD3FC;

  /* ---------- SEMANTIC SURFACES (dark-first) ---------- */
  --bg-page:        var(--ink-900);
  --bg-page-alt:    var(--ink-1000);
  --bg-surface:     var(--ink-800);
  --bg-surface-alt: var(--ink-700);
  --bg-elev:        var(--ink-700);
  --bg-inverse:     var(--ink-50);

  /* Foregrounds */
  --fg-1: var(--ink-50);    /* primary text */
  --fg-2: var(--ink-200);   /* secondary text */
  --fg-3: var(--ink-300);   /* tertiary / hint */
  --fg-4: var(--ink-400);   /* muted / disabled */
  --fg-on-accent: var(--ink-1000);

  /* Borders */
  --border-1: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.28);
  --border-accent: var(--volt-500);

  /* Accents (semantic) */
  --accent:         var(--volt-500);
  --accent-hover:   var(--volt-400);
  --accent-press:   var(--volt-600);
  --accent-soft:    rgba(232,255,89,0.12);
  --accent-2:       var(--pulse-500);

  /* ---------- TYPE — FAMILIES ---------- */
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE — SCALE (rem-based, 16px root) ---------- */
  --fs-display-xl: 7.5rem;   /* 120 — manifesto */
  --fs-display-l:  5.5rem;   /* 88 */
  --fs-display-m:  4rem;     /* 64 */
  --fs-h1:         3rem;     /* 48 */
  --fs-h2:         2.25rem;  /* 36 */
  --fs-h3:         1.625rem; /* 26 */
  --fs-h4:         1.25rem;  /* 20 */
  --fs-body-l:     1.125rem; /* 18 */
  --fs-body:       1rem;     /* 16 */
  --fs-body-s:     0.875rem; /* 14 */
  --fs-caption:    0.75rem;  /* 12 */
  --fs-eyebrow:    0.6875rem;/* 11 */

  /* Line heights */
  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  /* Letter spacing */
  --ls-display: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-mono:    0.02em;
  --ls-eyebrow: 0.22em;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- SPACING ---------- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 6rem;      /* 96 */
  --space-11: 8rem;      /* 128 */

  /* ---------- RADII ---------- */
  --radius-0: 0;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-5: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(232,255,89,0.4), 0 0 24px rgba(232,255,89,0.25);
  --shadow-glow-pulse: 0 0 0 1px rgba(255,51,102,0.4), 0 0 28px rgba(255,51,102,0.3);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---------- LAYOUT ---------- */
  --container: 1240px;
  --gutter: clamp(1rem, 2vw, 2rem);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.af-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.af-display-xl, .af-display-l, .af-display-m {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
.af-display-xl { font-size: clamp(3.5rem, 9vw, var(--fs-display-xl)); }
.af-display-l  { font-size: clamp(3rem, 7vw, var(--fs-display-l)); }
.af-display-m  { font-size: clamp(2.25rem, 5vw, var(--fs-display-m)); }

.af-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--fg-1); }
.af-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--fg-1); }
.af-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--fg-1); }
.af-h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-medium); letter-spacing: var(--ls-normal); line-height: var(--lh-snug); color: var(--fg-1); }

.af-body-l { font-size: var(--fs-body-l); line-height: var(--lh-normal); color: var(--fg-2); }
.af-body   { font-size: var(--fs-body);   line-height: var(--lh-normal); color: var(--fg-2); }
.af-body-s { font-size: var(--fs-body-s); line-height: var(--lh-normal); color: var(--fg-3); }
.af-caption{ font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); }

.af-mono   { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }

.af-quote-mark { color: var(--accent); }
.af-strike     { text-decoration: line-through; text-decoration-color: var(--accent-2); text-decoration-thickness: 0.12em; }
.af-highlight  { background: var(--accent); color: var(--fg-on-accent); padding: 0.05em 0.25em; border-radius: 2px; }