/* ============================================================
   TEKWILL EXPO DAY 2026 — Design Tokens
   Futuristic / cosmic-tech direction
   ============================================================ */

/* ---------- Web fonts (CDN — Google Fonts) ----------
   - Space Grotesk : geometric sans for headings & UI (bold, slightly squared)
   - Archivo Black : display logotype-style (closest free match to the
                     ultra-bold condensed-ish sans seen in the EXPO DAY mark)
   - JetBrains Mono : monospaced / metadata / code & timestamps
   ---------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ============================================================
     COLOR — Foundations
     ============================================================ */

  /* Space / surface scale — near-black to dim navy */
  --space-0:  #000814;   /* deepest — page bg */
  --space-1:  #03101F;   /* card bg */
  --space-2:  #0A1A2E;   /* raised */
  --space-3:  #112942;   /* hover / divider */
  --space-4:  #1B3A5C;   /* border emphasised */
  --space-5:  #2A5688;   /* subtle accent */

  /* Stellar — neutrals on dark */
  --stellar-100: #F5F8FF;  /* primary text on dark */
  --stellar-200: #C8D3E8;  /* secondary text */
  --stellar-300: #8A9CB8;  /* tertiary / metadata */
  --stellar-400: #5A6A85;  /* placeholder, muted */
  --stellar-500: #3A4A65;  /* divider on light surfaces */

  /* Plasma — primary brand accent (futuristic cyan) */
  --plasma-100: #CFFBFF;
  --plasma-300: #66F0FF;
  --plasma-500: #00E5FF;   /* PRIMARY ACCENT */
  --plasma-600: #00B8D4;
  --plasma-700: #007E96;
  --plasma-900: #002B36;

  /* Magenta — secondary accent (CTA emphasis, futuristic neon) */
  --magenta-300: #DDB8FD;
  --magenta-500: #C68DFB;   /* SECONDARY ACCENT — soft lavender/violet */
  --magenta-700: #8B53C8;
  --magenta-900: #2A1448;

  /* Solar — kept as tertiary (sampled from cover ring detail) */
  --solar-300:  #FFB47A;
  --solar-500:  #FF6B1A;
  --solar-700:  #B8430A;
  --solar-900:  #3F1604;

  /* Beam — reserved tertiary (highlight / live indicator) */
  --beam-500:   #B8FF3D;   /* electric green — "LIVE" / "NEW" */

  /* Signal — semantic */
  --signal-success:  #4ADE80;
  --signal-warning:  #FFC857;
  --signal-danger:   #FF4D6D;
  --signal-info:     var(--plasma-500);

  /* ============================================================
     SEMANTIC tokens
     ============================================================ */
  --bg:           var(--space-0);
  --bg-elevated:  var(--space-1);
  --bg-raised:    var(--space-2);
  --bg-hover:     var(--space-3);

  --fg:           var(--stellar-100);
  --fg-muted:     var(--stellar-200);
  --fg-dim:       var(--stellar-300);
  --fg-faint:     var(--stellar-400);

  --border:       rgba(245, 248, 255, 0.08);
  --border-strong:rgba(245, 248, 255, 0.16);
  --border-accent:var(--plasma-500);

  --accent:        var(--plasma-500);
  --accent-soft:   color-mix(in oklch, var(--plasma-500) 20%, transparent);
  --accent-glow:   0 0 24px color-mix(in oklch, var(--plasma-500) 60%, transparent);

  /* ============================================================
     TYPE — Foundations
     ============================================================ */
  --font-display: "Archivo Black", "Space Grotesk", system-ui, sans-serif;
  --font-sans:    "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Type scale — display-led (event marketing) */
  --fs-mega:    clamp(72px, 12vw, 200px);   /* hero "TEKWILL EXPO DAY" */
  --fs-display: clamp(56px, 8vw, 120px);    /* section openers */
  --fs-h1:      clamp(40px, 5vw, 72px);
  --fs-h2:      clamp(32px, 4vw, 56px);
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-lead:    20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;
  --fs-eyebrow: 12px;     /* "// SECTION 01" labels */

  --lh-tight:   0.95;
  --lh-snug:    1.1;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:   -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-mega:    0.18em;   /* eyebrows, monospace timestamps */

  /* ============================================================
     SPACING / RADIUS / SHADOW
     ============================================================ */
  --space-1u:  4px;
  --space-2u:  8px;
  --space-3u:  12px;
  --space-4u:  16px;
  --space-5u:  24px;
  --space-6u:  32px;
  --space-7u:  48px;
  --space-8u:  64px;
  --space-9u:  96px;
  --space-10u: 128px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow:0 0 0 1px var(--plasma-500), 0 0 32px color-mix(in oklch, var(--plasma-500) 50%, transparent);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC element styles
   ============================================================ */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  color: var(--plasma-500);
}

.t-mega,
h1.mega {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg);
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

h1, .t-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h2, .t-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.t-small  { font-size: var(--fs-small); line-height: var(--lh-normal); }
.t-caption{ font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-dim); }

.t-mono,
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--ls-normal);
}

/* Live timestamp / metadata stamp pattern — used heavily across the site */
.t-stamp {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  color: var(--fg-dim);
}