/* =========================================================================
   TGU — THE GREAT UNKNOWN
   Design tokens: color + type
   International electronic music booking agency.
   Aesthetic: Aphex Twin / Warp / 90s–00s rave. Monochrome + acid.
   =========================================================================

   FONTS — substituted from Google Fonts (no brand font files supplied):
     Space Grotesk  → display, UI, headings
     Space Mono     → labels, metadata, tracklists, code
     Unbounded     → mega / display (rounded retro-future, echoes the logo)
   Load before this file (or rely on the @import below):
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Unbounded:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   ========================================================================= */

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

:root {
  /* ---- CORE PALETTE ---- */
  --ink:        #0B0B0B;   /* near-black, primary text on light          */
  --void:       #000000;   /* pure black, club/dark surfaces             */
  --paper:      #F2EFE9;   /* warm off-white from the logo plate         */
  --paper-2:    #E9E5DC;   /* deeper paper, panels on light              */
  --paper-3:    #DCD7CB;   /* hairlines / borders on light               */

  /* ---- ACCENTS ---- */
  /* PRIMARY accent — Denim Wash (validated). Blue-jean, the TGU signature.
     Token name kept as --acid for back-compat across the system. */
  --acid:       #4F77B0;   /* PRIMARY accent — Denim Wash                */
  --acid-deep:  #34598C;   /* denim pressed / on-light text-safe         */
  --plasma:     #FF2E8B;   /* SECONDARY UV magenta — use sparingly       */
  --plasma-deep:#D11C6E;

  /* ---- NEUTRAL SCALE (oklch, cool-warm balanced) ---- */
  --n-950: oklch(0.16 0.004 95);
  --n-900: oklch(0.22 0.004 95);
  --n-800: oklch(0.30 0.004 95);
  --n-700: oklch(0.42 0.004 95);
  --n-600: oklch(0.54 0.004 95);
  --n-500: oklch(0.64 0.004 95);
  --n-400: oklch(0.74 0.004 95);
  --n-300: oklch(0.83 0.005 95);
  --n-200: oklch(0.90 0.006 95);
  --n-100: oklch(0.95 0.006 95);

  /* ---- SEMANTIC: LIGHT (default / editorial "paper" mode) ---- */
  --bg:        var(--paper);
  --bg-panel:  var(--paper-2);
  --bg-sunk:   var(--paper-3);
  --fg:        var(--ink);
  --fg-muted:  var(--n-600);
  --fg-faint:  var(--n-500);
  --line:      color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 28%, transparent);
  --accent:    var(--acid);
  --accent-ink:var(--paper);        /* text placed on denim fills        */
  --on-accent: #F4F2EC;             /* light text on denim fills         */

  /* ---- TYPE FAMILIES ---- */
  --font-display: "Unbounded", "Space Grotesk", "Helvetica Neue", sans-serif; /* big statement type — logo-adjacent */
  --font-head:    "Space Grotesk", "Helvetica Neue", Arial, sans-serif;       /* sub-headings / dense UI titles      */
  --font-ui:      "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Space Mono", "SFMono-Regular", ui-monospace, monospace;

  /* ---- TYPE SCALE (fluid, 1920 design canvas) ---- */
  --fs-mega:   clamp(56px, 9vw, 168px);   /* @kind font */ /* hero takeover */
  --fs-display:clamp(40px, 5.5vw, 92px);  /* @kind font */ /* section display */
  --fs-h1:     clamp(32px, 3.4vw, 56px);  /* @kind font */
  --fs-h2:     clamp(24px, 2.2vw, 36px);  /* @kind font */
  --fs-h3:     20px;                       /* @kind font */
  --fs-body:   16px;                       /* @kind font */
  --fs-small:  13px;                       /* @kind font */
  --fs-label:  11px;                       /* mono uppercase eyebrow  @kind font */

  --lh-tight:  0.92;   /* @kind font */
  --lh-snug:   1.05;   /* @kind font */
  --lh-body:   1.5;    /* @kind font */

  --tracking-mega:  -0.03em;   /* @kind font */
  --tracking-tight: -0.01em;   /* @kind font */
  --tracking-label: 0.22em;    /* wide mono labels  @kind font */

  /* ---- RADII ---- */
  --r-none: 0px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-pill: 999px;   /* fluid logo DNA → fully rounded capsules          */

  /* ---- 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;

  /* ---- ELEVATION (used sparingly; brand is mostly flat) ---- */
  --shadow-sm: 0 1px 2px rgba(11,11,11,.08);
  --shadow-md: 0 8px 28px rgba(11,11,11,.14);
  --shadow-acid: 0 0 0 1px var(--acid), 0 0 24px color-mix(in srgb, var(--acid) 45%, transparent);

  /* ---- MOTION ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur: 220ms;        /* @kind other */
  --dur-slow: 520ms;   /* @kind other */
}

/* ===== DARK / "CLUB" MODE — pure black, acid + stark white ===== */
[data-theme="dark"] {
  --bg:        var(--void);
  --bg-panel:  #0E0E0E;
  --bg-sunk:   #161616;
  --fg:        #F4F2EC;
  --fg-muted:  var(--n-400);
  --fg-faint:  var(--n-600);
  --line:      color-mix(in srgb, #F4F2EC 14%, transparent);
  --line-strong: color-mix(in srgb, #F4F2EC 30%, transparent);
  --accent:    var(--acid);
  --on-accent: #F4F2EC;
  --shadow-md: 0 8px 28px rgba(0,0,0,.6);
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES — opt in by class on a scoped container,
   or copy into product CSS.
   ========================================================================= */
.tgu {
  font-family: var(--font-ui);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.tgu h1, .tgu .h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.tgu h2, .tgu .h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.tgu h3, .tgu .h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.tgu .display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
}
.tgu .mega {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-mega);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.tgu p { max-width: 62ch; }

/* mono eyebrow / label — the workhorse "tech" accent of the brand */
.tgu .label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.tgu .meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}
.tgu code, .tgu .mono { font-family: var(--font-mono); }