/* ==========================================================================
   Vibz Design System — colors & type tokens
   --------------------------------------------------------------------------
   Vibz is a B2B2C live-event experience platform. The system is built on a
   dual-nature contrast: a sharp, technical "Creator" voice (General Sans,
   Regular + Medium) wrapped around an emotive "Lover" voice
   (Ivar Display Italic, generous scale, vivid accent washes).
   --------------------------------------------------------------------------
   Hex values were sampled directly from the official brand palette board.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Brand fonts — all self-hosted, locally bundled.
   Only THREE styles are permitted across the system:
     • General Sans Regular  (400)  — body, UI, labels, technical voice
     • General Sans Medium   (500)  — emphasis, eyebrows, buttons, mono-styled
     • Ivar Display Italic   (400)  — emotive kicker, hero hooks, lover voice
   No other faces or weights. Never substitute. Never load web fonts.
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'General Sans';
  src: url('/fonts/GeneralSans-Regular.woff2') format('woff2'),
       url('/fonts/GeneralSans-Regular.woff')  format('woff'),
       url('/fonts/GeneralSans-Regular.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'General Sans';
  src: url('/fonts/GeneralSans-Medium.woff2') format('woff2'),
       url('/fonts/GeneralSans-Medium.woff')  format('woff'),
       url('/fonts/GeneralSans-Medium.ttf')   format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Ivar Display';
  src: url('/fonts/IvarDisplay-Italic.woff2') format('woff2'),
       url('/fonts/IvarDisplay-Italic.woff')  format('woff'),
       url('/fonts/IvarDisplay-Italic.ttf')   format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

:root {
  /* ----------------------------------------------------------------------
     CORE PALETTE
     Black + white anchor everything. Vibz Red is the signature spark.
     The other accents (violet, mint, yellow) are reserved for contextual
     use — one per category (Performance / Business / Gaming / Museum).
     Never use more than 2 accent hues on the same surface.
  ---------------------------------------------------------------------- */

  /* Neutrals */
  --vibz-white:        #FFFFFF;
  --vibz-paper:        #F5F4F2;   /* warm off-white used for page bgs */
  --vibz-fog:          #EEEEEE;   /* subtle dividers, neutral cards   */
  --vibz-mist:         #D9D9D9;
  --vibz-stone:        #9A9A9A;
  --vibz-graphite:     #4A4A4A;
  --vibz-ink:          #161616;   /* near-black text on light bgs     */
  --vibz-black:        #000000;

  /* Signature */
  --vibz-red:          #FF314B;   /* primary spark — "Performance"    */
  --vibz-red-deep:     #D40C25;   /* hover / pressed                  */
  --vibz-red-soft:     #FFE4E8;   /* tinted backgrounds                */

  /* Category accents (each used as a thematic "world") */
  --vibz-violet:       #5B1EE4;   /* "feel" / brand emotional bg      */
  --vibz-violet-deep:  #3200B4;
  --vibz-mint:         #16D7A5;   /* "Gaming"                         */
  --vibz-mint-deep:    #0FA37D;
  --vibz-yellow:       #FFC741;   /* "Museum"                         */
  --vibz-yellow-deep:  #E0A800;

  /* ----------------------------------------------------------------------
     SEMANTIC TOKENS — light surface
  ---------------------------------------------------------------------- */
  --bg:                var(--vibz-paper);
  --bg-elevated:       var(--vibz-white);
  --bg-sunken:         var(--vibz-fog);
  --bg-inverse:        var(--vibz-black);

  --fg:                var(--vibz-ink);
  --fg-muted:          var(--vibz-graphite);
  --fg-subtle:         var(--vibz-stone);
  --fg-inverse:        var(--vibz-white);

  --border:            rgba(0, 0, 0, 0.10);
  --border-strong:     rgba(0, 0, 0, 0.22);
  --divider:           rgba(0, 0, 0, 0.06);

  --accent:            var(--vibz-red);
  --accent-hover:      var(--vibz-red-deep);
  --accent-fg:         var(--vibz-white);

  --focus-ring:        0 0 0 3px rgba(255, 49, 75, 0.32);

  --success:           var(--vibz-mint-deep);
  --warning:           var(--vibz-yellow-deep);
  --danger:            var(--vibz-red-deep);
  --info:              var(--vibz-violet);

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — ONLY three permitted styles
       --font-sans  → General Sans (Regular 400 + Medium 500)
       --font-serif → Ivar Display Italic (400 italic) — emotive kicker
       --font-mono  → General Sans Medium, used with tracking-caps for
                      technical labels / numeric strings (no separate
                      monospace face ships with the system).
  ---------------------------------------------------------------------- */
  --font-sans:   'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:  'Ivar Display', Georgia, serif;
  --font-mono:   'General Sans', system-ui, -apple-system, sans-serif;

  /* Type scale — modular 1.250 (major third), tuned for editorial impact */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;
  --fs-6xl:   120px;

  --lh-tight:    1.05;
  --lh-snug:     1.20;
  --lh-normal:   1.45;
  --lh-relaxed:  1.65;

  --tracking-tight:   -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.12em;

  /* ----------------------------------------------------------------------
     SHAPE & ELEVATION
  ---------------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-pill: 999px;

  --shadow-xs:  0 1px 2px rgba(20, 14, 16, 0.06);
  --shadow-sm:  0 2px 6px rgba(20, 14, 16, 0.06), 0 1px 2px rgba(20, 14, 16, 0.04);
  --shadow-md:  0 8px 24px rgba(20, 14, 16, 0.08), 0 2px 6px rgba(20, 14, 16, 0.05);
  --shadow-lg:  0 24px 60px rgba(20, 14, 16, 0.12), 0 8px 16px rgba(20, 14, 16, 0.06);
  --shadow-glow-red: 0 12px 40px rgba(255, 49, 75, 0.35);

  /* ---------- Spacing — 4px base ---------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

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

/* Dark surface — used for "Magician" / hero / B2C atmosphere blocks */
[data-theme="dark"], .vibz-dark {
  --bg:           var(--vibz-black);
  --bg-elevated:  #141414;
  --bg-sunken:    #0A0A0A;
  --bg-inverse:   var(--vibz-paper);
  --fg:           var(--vibz-white);
  --fg-muted:     #B7B7B7;
  --fg-subtle:    #6E6E6E;
  --fg-inverse:   var(--vibz-ink);
  --border:       rgba(255, 255, 255, 0.10);
  --border-strong:rgba(255, 255, 255, 0.22);
  --divider:      rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   ELEMENT DEFAULTS
   The system uses only three permitted styles. Headlines and body all set
   in General Sans (Medium for display weight, Regular for body); only the
   emotive kicker switches to Ivar Display Italic.
   ========================================================================== */

.vibz-h1, .vibz-display {
  font-family: var(--font-sans);
  font-weight: 500;            /* General Sans Medium */
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

/* The "emotional hook" headline — Ivar Display italic, the brand's heart */
.vibz-h1-emotive {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-5xl);
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.vibz-h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.vibz-h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
}

.vibz-h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.vibz-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
}

.vibz-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

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

.vibz-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: 1.25;
  color: var(--fg);
  text-wrap: pretty;
}

/* "Mono"-style technical label: General Sans Medium with wide caps tracking.
   The system intentionally does NOT ship a true monospace face. */
.vibz-mono, code, pre {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  font-size: 0.92em;
}