/* ============================================================
   ALL OUT STUDIOS — Colors & Type Foundations
   "WE MAKE ATHLETES IMPOSSIBLE TO IGNORE"
   ------------------------------------------------------------
   Load this file + the font links below in any document.

   FONTS: Archivo + Archivo Expanded + Spline Sans Mono are the
   closest Google Fonts match to the custom logo letterforms.
   These are SUBSTITUTIONS — see README "Fonts" for the ask.
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Expanded:wght@600;700;800;900&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   ============================================================ */

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

:root {
  /* ---------- CORE PALETTE ---------- */
  --ink:        #0C0C0C;  /* near-black — primary surface for dark, primary text on light */
  --ink-2:      #18181A;  /* raised dark surface / cards on ink */
  --ink-3:      #232327;  /* hairline-on-dark / pressed states */
  --paper:      #F5F3EE;  /* warm off-white — primary light surface */
  --paper-2:    #EBE8DF;  /* sunken light surface / alt sections */
  --paper-3:    #DEDACE;  /* light borders / dividers */

  /* ---------- SIGNATURE ACCENT ---------- */
  --volt:       #D4FF3D;  /* high-vis acid green — THE brand color. "impossible to ignore" */
  --volt-press: #BFE82E;  /* volt pressed / hover-darken */
  --volt-deep:  #5A6E12;  /* volt as readable text on paper */

  /* ---------- SECONDARY ACCENT ---------- */
  --flare:      #FF4019;  /* hot energy red-orange — sparingly, for kinetic punch */
  --flare-press:#E5340F;

  /* ---------- WARM NEUTRAL SCALE ---------- */
  --gray-950:   #0C0C0C;
  --gray-900:   #18181A;
  --gray-800:   #2A2A2C;
  --gray-700:   #44433E;
  --gray-600:   #5E5C54;
  --gray-500:   #78766C;
  --gray-400:   #9A978C;
  --gray-300:   #B9B6AB;
  --gray-200:   #D4D1C6;
  --gray-100:   #E7E4DA;
  --gray-050:   #F2EFE7;

  /* ---------- STATUS ---------- */
  --positive:   #2FBF6B;
  --warning:    #F5A623;
  --negative:   #FF4019;

  /* ============================================================
     SEMANTIC TOKENS — default theme is LIGHT (paper)
     ============================================================ */
  --bg:          var(--paper);
  --bg-sunken:   var(--paper-2);
  --bg-raised:   #FFFFFF;
  --fg:          var(--ink);
  --fg-muted:    var(--gray-600);
  --fg-subtle:   var(--gray-500);
  --border:      var(--paper-3);
  --border-strong: var(--ink);
  --accent:      var(--volt);
  --accent-fg:   var(--ink);     /* text/icon sitting ON volt */
  --link:        var(--ink);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif; /* wide, heavy, athletic */
  --font-sans:    'Archivo', system-ui, -apple-system, sans-serif;       /* headings + body */
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;/* labels, data, kickers */

  /* ---------- TYPE SCALE (fluid) ---------- */
  --text-hero:   clamp(3.5rem, 9vw, 8.5rem);   /* 56 → 136 */
  --text-d1:     clamp(2.75rem, 6vw, 5rem);    /* 44 → 80  */
  --text-d2:     clamp(2.25rem, 4.5vw, 3.5rem);/* 36 → 56  */
  --text-h1:     clamp(2rem, 3.2vw, 2.75rem);  /* 32 → 44  */
  --text-h2:     clamp(1.5rem, 2.4vw, 2rem);   /* 24 → 32  */
  --text-h3:     1.375rem;  /* 22 */
  --text-lg:     1.125rem;  /* 18 */
  --text-base:   1rem;      /* 16 */
  --text-sm:     0.875rem;  /* 14 */
  --text-xs:     0.75rem;   /* 12 */
  --text-kicker: 0.8125rem; /* 13 — mono label */

  /* ---------- WEIGHTS ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-x:       800;
  --w-black:   900;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:   0.92;  /* hero / display */
  --lh-snug:    1.04;  /* headings */
  --lh-normal:  1.5;   /* body */
  --lh-relaxed: 1.65;

  /* ---------- TRACKING ---------- */
  --track-tight:  -0.03em; /* big display */
  --track-snug:   -0.015em;
  --track-normal: 0;
  --track-wide:   0.04em;
  --track-kicker: 0.18em;  /* uppercase mono labels */

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-section: clamp(64px, 10vw, 160px); /* vertical section rhythm */
  --gutter: clamp(20px, 4vw, 32px);
  --maxw: 1280px;

  /* ---------- RADII (sharp by default) ---------- */
  --r-none: 0px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bd-hair:   1px solid var(--border);
  --bd-strong: 2px solid var(--border-strong);
  --bd-volt:   2px solid var(--volt);

  /* ---------- SHADOWS (screen-print feel) ---------- */
  --shadow-hard:    6px 6px 0 var(--ink);      /* sticker / poster offset */
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-volt:    6px 6px 0 var(--volt);
  --shadow-soft:    0 8px 30px rgba(12,12,12,0.12); /* floating menus/modals only */

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 160ms;
  --dur:      220ms;
  --dur-slow: 320ms;
  --dur-hero: 700ms;
}

/* ============================================================
   DARK THEME — apply on .on-ink (or [data-theme="ink"])
   ============================================================ */
.on-ink, [data-theme="ink"] {
  --bg:          var(--ink);
  --bg-sunken:   #060606;
  --bg-raised:   var(--ink-2);
  --fg:          var(--paper);
  --fg-muted:    var(--gray-400);
  --fg-subtle:   var(--gray-500);
  --border:      var(--ink-3);
  --border-strong: var(--paper);
  --link:        var(--paper);
}

/* ============================================================
   ELEMENT DEFAULTS — semantic, ready to use
   ============================================================ */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hero, h1.hero {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--text-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--w-x);
  font-size: var(--text-d2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  text-transform: uppercase;
  text-wrap: balance;
}

h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-x);
  font-size: var(--text-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
}

h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
}

p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }

.lede {
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  font-weight: var(--w-medium);
}

small, .text-sm { font-size: var(--text-sm); }

/* Kicker / eyebrow — the signature tactical label */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Data / stat numerals */
.stat {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a { color: var(--link); text-underline-offset: 0.2em; }

::selection { background: var(--volt); color: var(--ink); }