/* Electric Sheep Productions — Merged stylesheet (fonts + tokens + base)
 * All token files combined into one for standalone deployment.
 */

/* ── Fonts (Google CDN) ── */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600;6..96,700;6..96,800&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── Colors ── */
:root {
  --ink-1000: #100D09;
  --ink-900:  #1A1611;
  --ink-800:  #2A241C;
  --ink-700:  #3E3830;
  --ink-600:  #6E6557;
  --ink-500:  #9A9081;
  --ink-400:  #C5BBA8;

  --bone-100: #FCF9F2;
  --bone-200: #F4EEE1;
  --bone-300: #EBE2D1;
  --bone-400: #DECFB5;
  --bone-500: #C9B796;

  --gold-100: #F5E7C8;
  --gold-300: #DDBA76;
  --gold-500: #B8893B;
  --gold-600: #8A5E16;
  --gold-700: #6E4A11;

  --terra-300: #E6A877;
  --terra-500: #B5602A;
  --terra-700: #8A4318;

  --teal-300: #6FB9C2;
  --teal-500: #1F7A86;
  --teal-700: #115A64;

  --signal-positive: #2E9E63;
  --signal-warning:  #C8922A;
  --signal-danger:   #C4452F;

  --bg-void:        var(--bone-100);
  --bg-base:        var(--bone-200);
  --bg-section:     var(--bone-300);
  --surface-card:   var(--bone-100);
  --surface-raised: #FFFFFF;
  --surface-hover:  var(--bone-300);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-600);
  --text-faint:     var(--ink-500);
  --text-on-accent: var(--bone-100);

  --border-hairline: rgba(26,22,17,0.10);
  --border-soft:     rgba(26,22,17,0.16);
  --border-strong:   var(--ink-400);

  --accent:       var(--gold-600);
  --accent-hover: var(--gold-700);
  --accent-press: var(--gold-700);
  --accent-quiet: rgba(138,94,22,0.12);

  --vfx:  var(--gold-600);
  --live: var(--terra-500);
  --ai:   var(--teal-500);
}

/* ── Typography ── */
:root {
  --font-display: 'Bodoni Moda', 'Times New Roman', Georgia, serif;
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  --t-display:  clamp(3rem, 6vw, 5.5rem);
  --t-h1:       3rem;
  --t-h2:       2.25rem;
  --t-h3:       1.625rem;
  --t-h4:       1.25rem;
  --t-body-lg:  1.125rem;
  --t-body:     1rem;
  --t-small:    0.875rem;
  --t-meta:     0.75rem;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --track-tight:  -0.01em;
  --track-normal: 0;
  --track-label:  0.18em;
  --track-wide:   0.28em;
}

/* ── Spacing ── */
:root {
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  --r-none: 0px;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;

  --maxw-prose:   68ch;
  --maxw-content: 1200px;
  --maxw-wide:    1440px;
  --gutter:       clamp(20px, 5vw, 64px);
}

/* ── Effects ── */
:root {
  --shadow-sm: 0 1px 2px rgba(60,40,15,0.10);
  --shadow-md: 0 10px 28px rgba(60,40,15,0.12);
  --shadow-lg: 0 26px 60px rgba(60,40,15,0.16);

  --glow-accent: 0 0 0 1px rgba(156,110,28,0.45), 0 0 22px rgba(184,137,59,0.22);
  --glow-soft:   0 0 30px rgba(184,137,59,0.20);

  --inset-hairline: inset 0 0 0 1px var(--border-hairline);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;

  --grain-opacity: 0.04;
  --vignette: radial-gradient(120% 90% at 50% 8%, rgba(184,137,59,0.10), transparent 60%);
  --scrim-bottom: linear-gradient(to top, var(--ink-1000) 0%, transparent 60%);
}

/* ── Base ── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  margin: 0;
  font-weight: var(--w-bold);
}

h1, h2 { font-weight: 800; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.es-slate {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
}

::selection { background: var(--accent); color: var(--text-on-accent); }