/* ==========================================================================
   Battlin Design System — Colors & Type
   ========================================================================== */

/* Inter (body) and Tomorrow (display) — both via Google Fonts CDN. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Tomorrow:wght@400;500;600;700;800&display=swap');

:root {
  /* ----- Brand primary ----- */
  --bt-purple: #47089B;        /* Battlin Purple  — PANTONE 2665 C */
  --bt-gold:   #F4C044;        /* Battlin Gold    — PANTONE 137 C  */
  --bt-mist:   #F3F4FB;        /* Battlin Mist    — PANTONE 663 C  */

  /* ----- Brand secondary ----- */
  --bt-pink:   #CB2B88;        /* Laser Pink   */
  --bt-orange: #E97934;        /* Blaze Orange */
  --bt-blue:   #84FBF7;        /* Turbo Blue   */

  /* ----- Purple scale (derived, observed in product) ----- */
  --bt-purple-50:  #F2EEFB;
  --bt-purple-100: #E0D4F6;
  --bt-purple-200: #C9B8EC;
  --bt-purple-300: #AD9FC5;   /* rgb(173,160,197) — UI supporting text */
  --bt-purple-400: #7962A7;   /* rgb(121,98,167)  — UI supporting fill */
  --bt-purple-500: #6945B0;   /* rgb(105,69,176)  — UI accent fill */
  --bt-purple-600: #4E3286;   /* rgb(78,50,134)   — hover */
  --bt-purple-700: #47089B;   /* PRIMARY */
  --bt-purple-800: #1C0F38;   /* rgb(28,15,56)    — surface card */
  --bt-purple-900: #110A1F;   /* rgb(17,10,31)    — canvas / page bg */

  /* ----- Gold scale ----- */
  --bt-gold-400: #F6C25B;
  --bt-gold-500: #F4C044;
  --bt-gold-600: #F5BB47;

  /* ----- Neutrals ----- */
  --bt-white: #FFFFFF;
  --bt-mist-2: #F7F9FD;    /* rgb(247,249,253) */
  --bt-cloud: #C9C2D6;     /* rgb(201,194,214) */
  --bt-ink:   #110A1F;
  --bt-black: #000000;

  /* ----- Semantic ----- */
  --bt-success: #37BE74;   /* rgb(55,190,116) */
  --bt-danger:  #E54848;   /* rgb(229,72,72)  */
  --bt-warning: #E97934;
  --bt-info:    #84FBF7;

  /* ----- Semantic surfaces (dark-first, the product is dark) ----- */
  --bg-canvas:    var(--bt-purple-900);
  --bg-surface:   var(--bt-purple-800);
  --bg-raised:    #241647;
  --bg-overlay:   rgba(17,10,31,0.72);
  --bg-accent:    var(--bt-purple-700);

  --fg-primary:   var(--bt-mist);
  --fg-secondary: var(--bt-purple-300);
  --fg-muted:     var(--bt-purple-400);
  --fg-on-gold:   var(--bt-purple-700);
  --fg-inverse:   var(--bt-ink);

  --border-soft:   rgba(173,160,197,0.20);
  --border-strong: rgba(243,244,251,0.12);
  --border-accent: var(--bt-gold);

  /* ----- Shadows (soft purple glow + hard AI ) ----- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 20px rgba(17,10,31,0.45);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.55);
  --shadow-glow-gold:   0 0 24px rgba(244,192,68,0.45);
  --shadow-glow-pink:   0 0 24px rgba(203,43,136,0.45);
  --shadow-glow-purple: 0 0 32px rgba(105,69,176,0.55);

  /* ----- Radii ----- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ----- Spacing (8pt grid, 4pt half-steps) ----- */
  --sp-0: 0;
  --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;

  /* ----- Type families ----- */
  --font-display: 'Tomorrow', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ----- Type scale (digital) -----
     Title 60–72 Tomorrow Bold · Subtitle 36–48 Tomorrow Regular
     Highlighter 32–36 Inter Bold · Body 18–32 Inter Regular */
  --fs-display: 72px;
  --fs-title:   60px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      28px;
  --fs-highlight: 32px;
  --fs-lead:    24px;
  --fs-body:    18px;
  --fs-small:   14px;
  --fs-xs:      12px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.45;
  --lh-loose: 1.7;

  --ls-title:  -0.01em;
  --ls-upper:   0.08em;

  /* ----- Motion ----- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ==========================================================================
   Semantic type classes
   ========================================================================== */
.bt-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
}
.bt-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.bt-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}
.bt-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}
.bt-subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}
.bt-highlight {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-highlight);
  line-height: var(--lh-snug);
}
.bt-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: var(--lh-base);
}
.bt-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}
.bt-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: var(--lh-base);
}
.bt-overline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
}
.bt-mono-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==========================================================================
   Element defaults (opt-in by wrapping in .bt-root)
   ========================================================================== */
.bt-root {
  background: var(--bg-canvas);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}
.bt-root h1 { font: 700 var(--fs-h1)/var(--lh-snug) var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-title); }
.bt-root h2 { font: 700 var(--fs-h2)/var(--lh-snug) var(--font-display); text-transform: uppercase; }
.bt-root h3 { font: 700 var(--fs-h3)/var(--lh-snug) var(--font-display); text-transform: uppercase; }
.bt-root p  { font: 400 var(--fs-body)/var(--lh-base) var(--font-body); color: var(--fg-secondary); }