/* =========================================================
   BCVR Immersive — Brand Tokens
   Synthwave-meets-studio. Pure black canvas, neon gradient.
   ========================================================= */

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

:root {
  /* -------------------------------------------------------
     CORE PALETTE — sampled directly from the BCVR mark
     The brand reads as a horizon-line sunset:
     blue → violet → magenta → pink → coral → orange → gold
     ------------------------------------------------------- */
  --bcvr-blue:        #3096FB;   /* top-left of roundel ring */
  --bcvr-violet:      #7859EB;   /* top of ring  */
  --bcvr-indigo:      #834AE7;   /* left of ring */
  --bcvr-purple:      #BD31D6;   /* upper letterforms */
  --bcvr-magenta:     #CB13A9;   /* top-right of ring */
  --bcvr-pink:        #F742C5;   /* mid letterforms — signature */
  --bcvr-hotpink:     #FF63A5;   /* horizon glow */
  --bcvr-coral:       #FF4A4A;   /* horizon line of the sun */
  --bcvr-orange:      #FF7B10;   /* lower letterforms — signature */
  --bcvr-amber:       #EC9A32;   /* lower ring */
  --bcvr-gold:        #F7D000;   /* bottom-right of ring */

  /* -------------------------------------------------------
     NEUTRALS — pure-black anchored. The brand lives on black.
     ------------------------------------------------------- */
  --ink-0:    #000000;            /* signature canvas */
  --ink-1:    #0A0A0F;            /* near-black, very slight blue */
  --ink-2:    #14141C;            /* card surfaces */
  --ink-3:    #1F1F2B;            /* elevated surface / hover */
  --ink-4:    #2A2A38;            /* dividers, inset borders */
  --ink-5:    #3F3F50;            /* muted lines */
  --ink-6:    #6B6B7E;            /* tertiary text */
  --ink-7:    #9B9BAE;            /* secondary text */
  --ink-8:    #C9C9D6;            /* primary on dark, soft */
  --ink-9:    #ECECF2;            /* high-emphasis text */
  --ink-10:   #FFFFFF;            /* pure white — sparingly */

  /* Warm-ivory for highlights (matches the off-white inside the wordmark) */
  --ivory:    #FFFAEC;

  /* -------------------------------------------------------
     SEMANTIC TOKENS
     ------------------------------------------------------- */
  --bg:               var(--ink-0);
  --bg-elev-1:        var(--ink-1);
  --bg-elev-2:        var(--ink-2);
  --bg-elev-3:        var(--ink-3);

  --fg-1:             var(--ink-9);     /* primary text */
  --fg-2:             var(--ink-7);     /* secondary text */
  --fg-3:             var(--ink-6);     /* tertiary text */
  --fg-muted:         var(--ink-5);

  --border:           var(--ink-4);
  --border-strong:    var(--ink-5);
  --border-hairline:  rgba(255, 255, 255, 0.06);

  --accent:           var(--bcvr-pink);
  --accent-secondary: var(--bcvr-orange);
  --accent-cold:      var(--bcvr-blue);
  --accent-hot:       var(--bcvr-magenta);

  /* States */
  --success: #25E0A1;
  --warning: var(--bcvr-gold);
  --danger:  var(--bcvr-coral);
  --info:    var(--bcvr-blue);

  /* -------------------------------------------------------
     SIGNATURE GRADIENTS
     ------------------------------------------------------- */
  /* The wordmark gradient — vertical, full spectrum */
  --grad-wordmark: linear-gradient(
    180deg,
    #6840E8 0%,
    #BD31D6 18%,
    #F742C5 38%,
    #FF4A88 50%,
    #FF6A3D 70%,
    #FF8410 85%,
    #FFC845 100%
  );

  /* The roundel ring — conic, walks around the disc */
  --grad-roundel: conic-gradient(
    from 225deg,
    #3096FB 0%,
    #7859EB 12%,
    #BD31D6 25%,
    #CB13A9 38%,
    #F742C5 50%,
    #FF7B10 70%,
    #F7D000 85%,
    #3096FB 100%
  );

  /* Horizon — the "sun over the grid" — used for accents, bands, dividers */
  --grad-horizon: linear-gradient(
    180deg,
    var(--bcvr-pink) 0%,
    var(--bcvr-coral) 50%,
    var(--bcvr-orange) 100%
  );

  /* Cool side only — for "tech" surfaces, code, terminals */
  --grad-cool: linear-gradient(135deg, var(--bcvr-blue), var(--bcvr-indigo), var(--bcvr-magenta));

  /* Warm side only — for "creative" / output surfaces */
  --grad-warm: linear-gradient(135deg, var(--bcvr-pink), var(--bcvr-coral), var(--bcvr-gold));

  /* Subtle full-spectrum glow — small radius, low alpha — for hover halos */
  --glow-pink:   0 0 24px rgba(247, 66, 197, 0.45);
  --glow-orange: 0 0 24px rgba(255, 123, 16, 0.4);
  --glow-cyan:   0 0 24px rgba(48, 150, 251, 0.4);

  /* -------------------------------------------------------
     TYPOGRAPHY — TYPE FAMILIES
     ------------------------------------------------------- */
  /* Display: Audiowide — closest Google match for the BCVR wordmark's
     retro-futurist, slightly italic, geometric blocks.
     SUBSTITUTION: real wordmark uses a custom/commercial face
     (similar to Streamster / Boost / Sunday). Flagged in README. */
  --font-display: 'Audiowide', 'Bungee', 'Arial Black', system-ui, sans-serif;

  /* Body: Space Grotesk — modern, neutral-geometric, broad weight range.
     Pairs cleanly with the retro display without competing. */
  --font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Mono: JetBrains Mono — appropriate for code, terminals, prompts,
     model names, technical metadata. */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* -------------------------------------------------------
     TYPE SCALE — display-led; large + confident on hero,
     compact + legible in tools.
     ------------------------------------------------------- */
  --t-hero:        clamp(56px, 9vw, 160px);  /* "hero" display */
  --t-display-xl:  clamp(48px, 6vw, 96px);
  --t-display-l:   clamp(40px, 5vw, 72px);
  --t-display-m:   clamp(32px, 4vw, 56px);
  --t-h1:          clamp(28px, 3.2vw, 44px);
  --t-h2:          clamp(22px, 2.4vw, 32px);
  --t-h3:          20px;
  --t-h4:          16px;
  --t-body-lg:     18px;
  --t-body:        15px;
  --t-body-sm:     13px;
  --t-caption:     11px;
  --t-eyebrow:     12px;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-base:    1.5;
  --lh-loose:   1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-base:    0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;     /* eyebrows are CAPS, widely spaced */

  /* -------------------------------------------------------
     SPACING — 4px base
     ------------------------------------------------------- */
  --s-0:   0;
  --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;
  --s-10:  128px;
  --s-11:  192px;

  /* -------------------------------------------------------
     RADII — primarily sharp; rounded only on chips, tags,
     avatars, and the roundel itself.
     ------------------------------------------------------- */
  --r-0:   0;
  --r-1:   2px;
  --r-2:   4px;       /* default for buttons, fields, cards */
  --r-3:   8px;
  --r-4:   12px;
  --r-pill: 999px;
  --r-disc: 50%;

  /* -------------------------------------------------------
     ELEVATION — shadows are subtle on dark; glow does the
     real work of separation.
     ------------------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.6);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 6px 16px rgba(0,0,0,0.55);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 40px rgba(0,0,0,0.65);
  --shadow-hot:   0 0 0 1px rgba(247,66,197,0.4), 0 0 36px rgba(247,66,197,0.35);
  --shadow-cold:  0 0 0 1px rgba(48,150,251,0.4), 0 0 36px rgba(48,150,251,0.3);

  /* -------------------------------------------------------
     MOTION
     ------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);   /* default UI ease */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:    cubic-bezier(0.5, 1.6, 0.4, 1);  /* small overshoot */
  --dur-fast:     120ms;
  --dur-base:     220ms;
  --dur-slow:     420ms;
  --dur-hero:     900ms;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Optional — opt in with class="bcvr-prose" or use vars.
   ========================================================= */

.bcvr-base, .bcvr-prose {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.bcvr-prose h1, .bcvr-h1 {
  font-family: var(--font-display);
  font-size: var(--t-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--s-5);
}

.bcvr-prose h2, .bcvr-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: var(--s-7) 0 var(--s-4);
}

.bcvr-prose h3, .bcvr-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  margin: var(--s-6) 0 var(--s-3);
}

.bcvr-prose h4, .bcvr-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h3);
  color: var(--fg-1);
  margin: var(--s-5) 0 var(--s-2);
}

.bcvr-prose p, .bcvr-p {
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0 0 var(--s-4);
  max-width: 64ch;
}

.bcvr-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}

.bcvr-prose code, .bcvr-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-2);
  color: var(--bcvr-hotpink);
  padding: 1px 6px;
  border-radius: var(--r-2);
  border: 1px solid var(--border);
}

.bcvr-gradient-text {
  background: var(--grad-wordmark);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}