/* =========================================================
   Sudsy — colors_and_type.css
   Import this first. All tokens cascade from :root.
   ========================================================= */

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

:root {
  /* ---------- Brand neon triad ---------- */
  --blue:    #3BE7FF;   /* electric blue — primary accent */
  --purple:  #8A5CFF;   /* neon purple  — secondary accent */
  --aqua:    #00FFD1;   /* aqua green   — success / reward */

  /* Deeper tonal variants for layering */
  --blue-ink:   #0B7A8E;
  --purple-ink: #3D1E8A;
  --aqua-ink:   #006E5C;

  /* Lighter washed tints for highlights/text on dark */
  --blue-wash:   #A8F2FF;
  --purple-wash: #CBB5FF;
  --aqua-wash:   #A5FFEB;

  /* ---------- Foam / neutrals ---------- */
  --foam:    #F4FBFF;   /* blue-tinted white — clean signal */
  --foam-2:  #D9E7F0;   /* soft foam mid */
  --mist:    #8C94A8;   /* muted UI text */

  /* ---------- Dark surfaces ---------- */
  --void:    #06060C;   /* true background */
  --deep:    #0E0B1F;   /* deep violet — primary surface */
  --slab:    #14112B;   /* raised surface */
  --slab-2:  #1E1A3D;   /* card on slab */

  /* Glass fills (use with backdrop-filter: blur(20px)) */
  --glass-1: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.06);
  --glass-3: rgba(255, 255, 255, 0.10);

  /* Hairline strokes */
  --stroke-1: rgba(255, 255, 255, 0.08);
  --stroke-2: rgba(255, 255, 255, 0.14);
  --stroke-3: rgba(255, 255, 255, 0.22);
  --highlight: rgba(255, 255, 255, 0.30);   /* inner top-edge reflection */

  /* ---------- Semantic text colors ---------- */
  --fg1: #FFFFFF;                          /* primary text */
  --fg2: rgba(255, 255, 255, 0.72);        /* secondary */
  --fg3: rgba(255, 255, 255, 0.48);        /* tertiary / captions */
  --fg-mute: rgba(255, 255, 255, 0.28);    /* placeholder / disabled label */
  --fg-on-neon: var(--void);               /* text on bright neon fills */

  /* ---------- Semantic status ---------- */
  --success: var(--aqua);
  --warning: #FFC857;
  --danger:  #FF5C8A;
  --info:    var(--blue);

  /* ---------- Signature gradients ---------- */
  --grad-liquid:    linear-gradient(135deg, #8A5CFF 0%, #3BE7FF 55%, #00FFD1 100%);
  --grad-liquid-r:  linear-gradient(135deg, #00FFD1 0%, #3BE7FF 45%, #8A5CFF 100%);
  --grad-foam:      linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.02) 100%);
  --grad-void:      radial-gradient(120% 90% at 50% 0%, #1A1340 0%, #0E0B1F 55%, #06060C 100%);
  --grad-scrim-t:   linear-gradient(180deg, rgba(6,6,12,0) 0%, rgba(6,6,12,0.85) 100%);
  --grad-scrim-b:   linear-gradient(0deg,   rgba(6,6,12,0) 0%, rgba(6,6,12,0.85) 100%);
  --grad-shine:     linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);

  /* ---------- Glows ---------- */
  --glow-blue:    0 0 24px rgba(59, 231, 255, 0.55), 0 0 64px rgba(59, 231, 255, 0.25);
  --glow-purple:  0 0 24px rgba(138, 92, 255, 0.55), 0 0 64px rgba(138, 92, 255, 0.25);
  --glow-aqua:    0 0 24px rgba(0, 255, 209, 0.55),  0 0 64px rgba(0, 255, 209, 0.25);
  --glow-foam:    0 0 32px rgba(244, 251, 255, 0.35);

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 8px rgba(0,0,0,0.45);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 24px rgba(0,0,0,0.55);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.10) inset, 0 20px 60px rgba(0,0,0,0.65);

  /* ---------- Spacing (base 4) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 20px;
  --r-4: 28px;
  --r-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-smooth:  cubic-bezier(0.20, 0.80, 0.20, 1.00);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
  --dur-reward: 800ms;

  /* ---------- Type families ---------- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---------- Type scale (in px at 390 mobile design width) ---------- */
  --t-micro:  11px;
  --t-caption:12px;
  --t-body:   14px;
  --t-body-l: 16px;
  --t-h4:     18px;
  --t-h3:     22px;
  --t-h2:     28px;
  --t-h1:     36px;
  --t-display:56px;
  --t-mega:   84px;
}

/* =========================================================
   Base
   ========================================================= */
html, body {
  background: var(--grad-void);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--t-body-l);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   Semantic type — use these as classes OR reference the
   CSS vars above in component styles.
   ========================================================= */
.t-mega, h1.display {
  font-family: var(--font-display);
  font-size: var(--t-mega);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
h4, .t-h4 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.t-body-l, p.lead {
  font-family: var(--font-body);
  font-size: var(--t-body-l);
  font-weight: 400;
  line-height: 1.5;
}
.t-body, p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg2);
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg3);
}
.t-micro {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
}
.t-mono, code, .hud-num {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'zero';
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Utility: gradient text (liquid)
   ========================================================= */
.t-liquid {
  background: var(--grad-liquid);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}