/* ============================================================
   Soho Live Studios — Design Tokens
   Colors, type, spacing, motion. Dark-first. Monochrome typography.
   ============================================================ */

/* ── FONT FACES ─────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Rethink Sans';
  src: url('fonts/RethinkSans-VariableFont.ttf') format('truetype-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rethink Sans';
  src: url('fonts/RethinkSans-Italic-VariableFont.ttf') format('truetype-variations');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Prata';
  src: url('fonts/Prata-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sackers Gothic';
  src: url('fonts/SackersGothicStd-Heavy.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sackers Gothic';
  src: url('fonts/SackersGothicStd-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sackers Gothic';
  src: url('fonts/SackersGothicStd-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Colt Soft';
  src: url('fonts/ColtSoft-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Colt Soft';
  src: url('fonts/ColtSoft-Demi.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Colt Soft';
  src: url('fonts/ColtSoft-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hillmont';
  src: url('fonts/Hillmont.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ── NEUTRALS (Dark-first) ─────────────────────────── */
  --black:    #000000;
  --ink:      #050505;
  --s900:     #0A0A0A;  /* Surface — page bg */
  --s800:     #111111;  /* Surface — card bg */
  --s700:     #161616;  /* Surface — raised card */
  --s600:     #222222;  /* Border — strong */
  --s500:     #2E2E2E;  /* Border — default */
  --s400:     #3A3A3A;  /* Border — subtle */
  --s350:     #555555;  /* Text — disabled */
  --s300:     #7A7A7A;  /* Text — tertiary */
  --s250:     #9A9A9E;  /* Text — quiet */
  --s200:     #BABAC4;  /* Text — secondary */
  --s150:     #D8D8DC;  /* Text — body on dark */
  --bone:     #F5F5F3;  /* Text — body warm */
  --white:    #FFFFFF;  /* Text — heading */

  /* ── DIGITAL PRIMARIES ────────────────────────────── */
  --soho-yellow:   #FEE300;
  --ella-aqua:     #73FBEC;
  --dizzy-pink:    #FC38A1;
  --oscar-purple:  #42136F;
  --purple-accent: #691DB1;  /* lighter, usable purple */

  /* ── PRINT SUPPORTING ─────────────────────────────── */
  --soho-mustard:  #F3C412;
  --soho-mint:     #BDE5A9;
  --soho-grape:    #D781F4;
  --soho-sky:      #7992E6;

  /* ── STAGE COLOURS (contextual only) ──────────────── */
  --alfies:          #BA4857;
  --jack-solomons:   #577357;
  --discovery-stage: #6B4488;
  --piano-bar-soho:  #B6986C;

  /* ── DISCOVERY STAGE EXTENDED ─────────────────────── */
  --boxing-red:        #B33347;
  --playground-purple: #6B4488;
  --spotlight-green:   #2E7874;
  --selector-buff:     #D4975B;
  --discovery-orange:  #F07252;

  /* ── LEGACY ALIASES (back-compat) ─────────────────── */
  --yellow:    var(--soho-yellow);
  --ella:      var(--ella-aqua);
  --dizzy:     var(--dizzy-pink);
  --oscar-d:   var(--oscar-purple);
  --oscar:     var(--purple-accent);
  --mustard:   var(--soho-mustard);
  --mint:      var(--soho-mint);
  --grape:     var(--soho-grape);
  --sky:       var(--soho-sky);
  --jack:      var(--jack-solomons);
  --playground:var(--discovery-stage);
  --pianobar:  var(--piano-bar-soho);
  --boxing:    var(--boxing-red);
  --spotlight: var(--spotlight-green);
  --selector:  var(--selector-buff);
  --discovery: var(--discovery-orange);

  /* ── SEMANTIC FOREGROUNDS ─────────────────────────── */
  --fg:        var(--white);
  --fg-1:      var(--white);    /* heading */
  --fg-2:      var(--s150);     /* body */
  --fg-3:      var(--s250);     /* secondary */
  --fg-4:      var(--s350);     /* disabled */
  --fg-invert: var(--black);

  /* ── SEMANTIC BACKGROUNDS ─────────────────────────── */
  --bg:        var(--black);
  --bg-1:      var(--black);
  --bg-2:      var(--s900);
  --bg-3:      var(--s800);
  --bg-raised: var(--s700);

  /* ── BORDERS ──────────────────────────────────────── */
  --border:        var(--s500);
  --border-subtle: var(--s400);
  --border-strong: var(--s600);
  --border-faint:  rgba(255,255,255,0.08);

  /* ── TYPE FAMILIES ────────────────────────────────── */
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:    'Rethink Sans', 'Inter', -apple-system, sans-serif;
  --serif:   'Prata', Georgia, 'Times New Roman', serif;
  --gothic:  'Sackers Gothic', 'Inter', sans-serif;     /* alt: 'Special Gothic Expanded One' */
  --accent:  'Colt Soft', 'Rethink Sans', sans-serif;
  --script:  'Hillmont', 'Prata', cursive;              /* Alfie's voice only */
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── TYPE SIZES ───────────────────────────────────── */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 16px;     /* body — Rethink Sans, never too small */
  --fs-md:   18px;
  --fs-lg:   21px;
  --fs-xl:   28px;
  --fs-2xl:  40px;
  --fs-3xl:  56px;
  --fs-4xl:  80px;
  --fs-5xl:  128px;

  /* ── LINE HEIGHTS ─────────────────────────────────── */
  --lh-tight:   0.94;
  --lh-snug:    1.1;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* ── LETTER SPACING ───────────────────────────────── */
  --ls-tight:    -0.04em;   /* display */
  --ls-snug:     -0.02em;   /* h1/h2 */
  --ls-normal:   0;
  --ls-wide:     0.08em;    /* uppercase labels */
  --ls-wider:    0.12em;    /* eyebrows */
  --ls-widest:   0.22em;    /* overlines */

  /* ── SPACING — 8px base scale ─────────────────────── */
  --sp-0: 0;
  --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;

  /* ── RADII (very small, per brand) ────────────────── */
  --rad-sm:   2px;
  --rad:      4px;
  --rad-lg:   6px;
  --rad-xl:   12px;
  --rad-pill: 999px;

  /* ── MOTION (smooth, restrained, no movement w/o fade) ─ */
  --dur:       300ms;
  --dur-slow:  560ms;
  --dur-veil:  2400ms;
  --ease:      cubic-bezier(0.42, 0, 0.22, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.5, 0, 1, 1);

  /* ── LAYOUT ───────────────────────────────────────── */
  --shell-w:   1280px;
  --content-w: 920px;
  --read-w:    620px;
  --sidebar-w: 248px;
  --nav-h:     52px;

  /* ── ELEVATION (subtle on dark) ───────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-2: 0 6px 24px rgba(0,0,0,0.55);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.65);
  --glow-oscar: 0 0 60px rgba(105,29,177,0.35);

  /* ── GRADIENTS (allowed; never on UI/text) ────────── */
  --grad-signature: linear-gradient(120deg, var(--ella), var(--oscar) 45%, var(--dizzy));
  --grad-page-bg:
    radial-gradient(circle at 28% 35%, rgba(105,29,177,0.32), transparent 52%),
    radial-gradient(circle at 72% 55%, rgba(66,19,111,0.22), transparent 52%),
    radial-gradient(circle at 50% 95%, rgba(252,56,161,0.08), transparent 45%),
    var(--black);
  --grad-vignette: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.18) 65%, rgba(0,0,0,0) 100%);
  --grad-protect-top: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
  --grad-protect-bot: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

/* ============================================================
   SEMANTIC BASE (use as classes or extend)
   Type is strictly monochrome — never apply colour to headings,
   body or UI text.
   ============================================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body, .ds-body {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* DISPLAY — uppercase Inter 800. Titles + button labels. */
.ds-display, h1.ds-h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}

/* H1 — section starter */
.ds-h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--fg-1);
  text-transform: uppercase;
}

/* H2 — Editorial serif */
.ds-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

/* H3 — All-caps small label */
.ds-h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--fg-1);
  text-transform: uppercase;
}

/* Eyebrow — small caps overline */
.ds-eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--ls-widest);
  color: var(--fg-3);
  text-transform: uppercase;
}

/* Lead — Prata serif intro paragraph */
.ds-lead {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--fg-2);
}

/* Body — Rethink Sans, never small */
.ds-body, p.ds-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

/* Caption */
.ds-caption {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-3);
}

/* Mono — code/data */
.ds-mono {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
}

/* Button label — Inter 700, uppercase */
.ds-btn-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-1);
}

/* ============================================================
   GLOBAL — fade reveal (no movement, per motion principle)
   ============================================================ */
.ds-reveal {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.ds-reveal.is-visible { opacity: 1; }