/* PUSH Design System — Tokens
 * Source: PUSH_Brand_Guidelines for AI.pdf (14 pages)
 * --------------------------------------------------------------- */

@font-face {
  font-family: 'MADE Outer Sans';
  src: url('fonts/MADE-Outer-Sans-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

:root {
  /* --- PRIMARY (always available, do the heavy lifting) --- */
  --push-black:      #111111;  /* main background */
  --push-white:      #FFFFFF;  /* default text, secondary bg */
  --push-purple:     #8A66FF;  /* main highlight, visual elements, strokes */
  /* Accessible purple for SMALL text only (brand #8A66FF is reserved for
   * large headings/graphics; it fails WCAG AA at body sizes —
   * 3.87:1 on white, 4.43:1 on black). These pass AA (>=4.5:1). */
  --push-purple-on-light: #6E4DE0;  /* small purple text on white  (~5.5:1) */
  --push-purple-on-dark:  #9B7DFF;  /* small purple text on #111   (~5.5:1) */

  /* --- SUPPORT (used as accent, never dominant) --- */
  --push-green:      #199949;  /* UI, graphic fills, outlines */
  --push-yellow:     #F3D002;  /* UI, graphic fills, outlines */
  --push-red:        #ED402A;  /* highlight accents, subtle elements */

  /* --- DERIVED PURPLES (for gradient + tint usage only) --- */
  --push-purple-50:  #F1ECFF;  /* faint tint for light-bg patterns */
  --push-purple-200: #C9B8FF;
  --push-purple-400: #8A66FF;  /* alias of primary */
  --push-purple-700: #5B3FCC;
  --push-purple-900: #2E1F66;

  /* --- NEUTRAL helpers (very narrow palette — avoid inventing) --- */
  --push-ink-80:     rgba(255, 255, 255, 0.80); /* secondary white text on dark */
  --push-ink-60:     rgba(255, 255, 255, 0.60); /* tertiary white text on dark */
  --push-ink-30:     rgba(255, 255, 255, 0.30); /* hairlines on dark */
  --push-ink-10:     rgba(255, 255, 255, 0.10);
  --push-shadow-80:  rgba(17, 17, 17, 0.80);
  --push-shadow-60:  rgba(17, 17, 17, 0.60);
  --push-shadow-30:  rgba(17, 17, 17, 0.30);

  /* --- GRADIENTS (purple only, per brand) --- */
  --push-grad-dark:  linear-gradient(90deg, #2E1F66 0%, #8A66FF 100%);
  --push-grad-light: linear-gradient(90deg, #FFFFFF 0%, #8A66FF 100%);

  /* --- TYPE STACKS --- */
  --font-display: 'MADE Outer Sans', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Work Sans', system-ui, -apple-system, sans-serif;

  /* --- TYPE SCALE (designed for 1920×1080 slides + web) --- */
  --t-hero:    clamp(72px, 9vw, 168px);  /* biggest stage — covers, openers */
  --t-h1:      clamp(56px, 6vw, 112px);  /* section titles */
  --t-h2:      clamp(40px, 4vw, 72px);   /* slide titles */
  --t-h3:      28px;                     /* sub-headlines */
  --t-eyebrow: 14px;                     /* category labels, ALL CAPS */
  --t-body-lg: 22px;
  --t-body:    18px;
  --t-small:   14px;
  --t-micro:   11px;

  /* --- LINE / TRACK --- */
  --lh-tight:    0.92;
  --lh-display:  1.0;
  --lh-snug:     1.15;
  --lh-normal:   1.45;
  --lh-loose:    1.65;
  --tr-display:  -0.01em;
  --tr-eyebrow:  0.14em;

  /* --- RHYTHM --- */
  --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 (small/medium only — circles do most heavy curve work) --- */
  --r-sm:    4px;
  --r-md:    12px;
  --r-lg:    24px;
  --r-pill:  9999px;

  /* --- STROKES (purple strokes are a signature) --- */
  --stroke-thin:   1.5px;
  --stroke-med:    2px;
  --stroke-thick:  3px;
}

/* ---- BASE ---- */
html, body {
  background: var(--push-black);
  color: var(--push-white);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Type primitives -------------------------------------------------- */
.t-display, .t-hero, .t-h1, .t-h2, .t-eyebrow, .t-mark {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
}
.t-hero    { font-size: var(--t-hero);    line-height: var(--lh-tight); }
.t-h1      { font-size: var(--t-h1);      line-height: var(--lh-tight); }
.t-h2      { font-size: var(--t-h2);      line-height: var(--lh-tight); }
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}
.t-mark { /* small "PUSH" wordmark in corner — body font, Bold */
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.t-h3       { font-family: var(--font-body); font-weight: 700; font-size: var(--t-h3); line-height: var(--lh-snug); }
.t-body-lg  { font-size: var(--t-body-lg); line-height: var(--lh-normal); }
.t-body     { font-size: var(--t-body);    line-height: var(--lh-normal); }
.t-small    { font-size: var(--t-small);   line-height: var(--lh-normal); }
.t-micro    { font-size: var(--t-micro);   line-height: var(--lh-snug); letter-spacing: 0.04em; }

/* Color utilities -------------------------------------------------- */
.c-purple { color: var(--push-purple); }
.c-yellow { color: var(--push-yellow); }
.c-green  { color: var(--push-green);  }
.c-red    { color: var(--push-red);    }
.c-white  { color: var(--push-white);  }
.c-black  { color: var(--push-black);  }
.c-ink-60 { color: var(--push-ink-60); }
.c-ink-80 { color: var(--push-ink-80); }

.bg-black  { background: var(--push-black); color: var(--push-white); }
.bg-white  { background: var(--push-white); color: var(--push-black); }
.bg-purple { background: var(--push-purple); color: var(--push-white); }
.bg-purple-50 { background: var(--push-purple-50); color: var(--push-black); }

/* Hairline (purple stroke, a signature) */
.hairline { border: var(--stroke-thin) solid var(--push-purple); }
.hairline-ink { border: var(--stroke-thin) solid var(--push-ink-30); }