/* ==========================================================================
   Vibz Design System V2 — colors & type tokens
   --------------------------------------------------------------------------
   Source of truth: General Sans (sans, Medium 500 is the workhorse) and
   Ivar Display Italic (single-word accent inside a heading only).
   White / anthracite dominant; red `#FF314B` is the activation accent.

   This file also exposes V1 (`--vibz-*` / `--font-sans|serif|mono`) aliases
   so legacy components keep rendering against V2 values.
   ========================================================================== */

@font-face {
  font-family: "General Sans";
  src: url("fonts/GeneralSans-Variable.ttf") format("truetype-variations"),
       url("fonts/GeneralSans-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ivar Display";
  src: url("fonts/IvarDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* JetBrains Mono for technical numbers / eyebrows. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ────────────────────────────────────────────────────────────────────
     V2 PRIMARY PALETTE
     ──────────────────────────────────────────────────────────────────── */
  --vz-white:         #ffffff;
  --vz-grey:          #f5f5f5;
  --vz-anthracite:    #222222;
  --vz-black:         #000000;
  --vz-red:           #ff314b;
  --vz-red-dark:      #cb061f;

  /* SECONDARY PALETTE */
  --vz-purple:        #6f3cf4;
  --vz-purple-dark:   #3504b7;
  --vz-yellow:        #ffc631;
  --vz-yellow-dark:   #f78c1a;
  --vz-turquoise:     #12dba8;
  --vz-turquoise-dark:#08b589;

  /* SEMANTIC — LIGHT */
  --vz-bg:            var(--vz-white);
  --vz-bg-soft:       var(--vz-grey);
  --vz-bg-invert:     var(--vz-black);
  --vz-fg:            var(--vz-anthracite);
  --vz-fg-strong:     var(--vz-black);
  --vz-fg-muted:      #6b6b6b;
  --vz-fg-subtle:     #a3a3a3;
  --vz-fg-invert:     var(--vz-white);
  --vz-line:          #e8e8e8;
  --vz-line-strong:   #d0d0d0;
  --vz-accent:        var(--vz-red);
  --vz-accent-press:  var(--vz-red-dark);
  --vz-focus-ring:    color-mix(in oklab, var(--vz-red) 45%, transparent);

  /* ────────────────────────────────────────────────────────────────────
     V2 TYPE
     ──────────────────────────────────────────────────────────────────── */
  --vz-font-sans:  "General Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --vz-font-serif: "Ivar Display", "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --vz-font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --vz-text-xs:   12px;
  --vz-text-sm:   14px;
  --vz-text-base: 16px;
  --vz-text-md:   18px;
  --vz-text-lg:   22px;
  --vz-text-xl:   28px;
  --vz-text-2xl:  36px;
  --vz-text-3xl:  48px;
  --vz-text-4xl:  64px;
  --vz-text-5xl:  88px;
  --vz-text-6xl:  128px;

  --vz-leading-tight:   0.95;
  --vz-leading-display: 0.9;
  --vz-leading-snug:    1.15;
  --vz-leading-body:    1.5;

  --vz-tracking-tight:   -0.02em;
  --vz-tracking-normal:   0;
  --vz-tracking-wide:     0.08em;
  --vz-tracking-eyebrow:  0.14em;

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

  /* RADII */
  --vz-radius-xs:    4px;
  --vz-radius-sm:    8px;
  --vz-radius-md:    16px;
  --vz-radius-lg:    24px;
  --vz-radius-xl:    32px;
  --vz-radius-card:  28px;
  --vz-radius-pill:  999px;

  /* ELEVATION — restrained */
  --vz-shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --vz-shadow-2: 0 6px 18px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --vz-shadow-3: 0 24px 48px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.05);
  --vz-shadow-glow-red: 0 0 0 6px color-mix(in oklab, var(--vz-red) 18%, transparent);

  /* MOTION — organic */
  --vz-ease-out:    cubic-bezier(.22,.61,.36,1);
  --vz-ease-in-out: cubic-bezier(.65,.05,.36,1);
  --vz-ease-soft:   cubic-bezier(.4,0,.2,1);
  --vz-dur-fast:    140ms;
  --vz-dur-base:    240ms;
  --vz-dur-slow:    480ms;
  --vz-dur-pulse:   1800ms;

  /* ════════════════════════════════════════════════════════════════════
     V1 → V2 COMPATIBILITY ALIASES
     Existing components reference these names. Each one resolves to a V2
     value so the migration is non-breaking.
     ════════════════════════════════════════════════════════════════════ */

  /* Fonts (legacy names) */
  --font-sans:  var(--vz-font-sans);
  --font-serif: var(--vz-font-serif);
  --font-mono:  var(--vz-font-mono);

  /* Neutrals */
  --vibz-white:    var(--vz-white);
  --vibz-paper:    var(--vz-grey);      /* warm paper → soft grey in V2 */
  --vibz-fog:      #eeeeee;
  --vibz-mist:     #d9d9d9;
  --vibz-stone:    var(--vz-fg-subtle);
  --vibz-graphite: var(--vz-fg-muted);
  --vibz-ink:      var(--vz-anthracite);
  --vibz-black:    var(--vz-black);

  /* Signature */
  --vibz-red:      var(--vz-red);
  --vibz-red-deep: var(--vz-red-dark);
  --vibz-red-soft: #ffe4e8;

  /* Category accents */
  --vibz-violet:      var(--vz-purple);
  --vibz-violet-deep: var(--vz-purple-dark);
  --vibz-mint:        var(--vz-turquoise);
  --vibz-mint-deep:   var(--vz-turquoise-dark);
  --vibz-yellow:      var(--vz-yellow);
  --vibz-yellow-deep: var(--vz-yellow-dark);

  /* Semantic */
  --bg:           var(--vz-bg-soft);
  --bg-elevated:  var(--vz-white);
  --bg-sunken:    #eeeeee;
  --bg-inverse:   var(--vz-black);
  --fg:           var(--vz-fg);
  --fg-muted:     var(--vz-fg-muted);
  --fg-subtle:    var(--vz-fg-subtle);
  --fg-inverse:   var(--vz-white);
  --border:       var(--vz-line);
  --border-strong:var(--vz-line-strong);
  --accent:       var(--vz-red);
  --accent-hover: var(--vz-red-dark);
  --accent-fg:    var(--vz-white);

  /* Motion (legacy names) */
  --ease-out:    var(--vz-ease-out);
  --ease-in-out: var(--vz-ease-in-out);
  --dur-fast:    var(--vz-dur-fast);
  --dur-base:    var(--vz-dur-base);
  --dur-slow:    var(--vz-dur-slow);

  /* Shadow & radius aliases */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: var(--vz-shadow-1);
  --shadow-md: var(--vz-shadow-2);
  --shadow-lg: var(--vz-shadow-3);
  --shadow-glow-red: var(--vz-shadow-glow-red);

  --radius-xs:   var(--vz-radius-xs);
  --radius-sm:   var(--vz-radius-sm);
  --radius-md:   var(--vz-radius-md);
  --radius-lg:   var(--vz-radius-lg);
  --radius-xl:   var(--vz-radius-xl);
  --radius-2xl:  48px;
  --radius-pill: var(--vz-radius-pill);
}

/* DARK MODE */
[data-theme="dark"], .vz-dark {
  --vz-bg:         var(--vz-black);
  --vz-bg-soft:    #0e0e0e;
  --vz-bg-invert:  var(--vz-white);
  --vz-fg:         var(--vz-white);
  --vz-fg-strong:  var(--vz-white);
  --vz-fg-muted:   #a8a8a8;
  --vz-fg-subtle:  #6b6b6b;
  --vz-fg-invert:  var(--vz-anthracite);
  --vz-line:       #1f1f1f;
  --vz-line-strong:#2e2e2e;
}

/* ============================================================================
   ELEMENT DEFAULTS
   ============================================================================ */

html, body {
  font-family: var(--vz-font-sans);
  font-size: var(--vz-text-base);
  line-height: var(--vz-leading-body);
  color: var(--vz-fg);
  background: var(--vz-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* V2 type utilities — General Sans Medium is the workhorse heading weight */
.vz-display, .vz-h1, .vz-h2, .vz-h3, .vz-h4,
.vibz-display, .vibz-h1, .vibz-h2, .vibz-h3, .vibz-h4 {
  font-family: var(--vz-font-sans);
  font-weight: 500;
  letter-spacing: var(--vz-tracking-tight);
  line-height: var(--vz-leading-display);
  color: var(--vz-fg-strong);
  text-wrap: balance;
}
.vz-display, .vibz-display { font-size: clamp(56px, 9vw, var(--vz-text-6xl)); }
.vz-h1, .vibz-h1 { font-size: clamp(40px, 6vw, var(--vz-text-4xl)); line-height: var(--vz-leading-tight); }
.vz-h2, .vibz-h2 { font-size: clamp(32px, 4.5vw, var(--vz-text-3xl)); line-height: var(--vz-leading-tight); }
.vz-h3, .vibz-h3 { font-size: var(--vz-text-2xl); line-height: var(--vz-leading-snug); }
.vz-h4, .vibz-h4 { font-size: var(--vz-text-xl); line-height: var(--vz-leading-snug); }

/* The accent serif — single-word italic inside a sans heading */
.vz-accent, em.vz-accent, .vz-serif {
  font-family: var(--vz-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* Body, eyebrow, mono — same shape as the V2 source. */
.vz-body, .vibz-body {
  font-family: var(--vz-font-sans);
  font-size: var(--vz-text-base);
  line-height: var(--vz-leading-body);
  color: var(--vz-fg);
  text-wrap: pretty;
}
.vz-body-lg { font-size: var(--vz-text-md); line-height: 1.55; }
.vz-body-sm, .vibz-body-sm { font-size: var(--vz-text-sm); line-height: 1.5; color: var(--vz-fg-muted); }

.vz-eyebrow, .vibz-eyebrow {
  font-family: var(--vz-font-sans);
  font-weight: 600;
  font-size: var(--vz-text-xs);
  letter-spacing: var(--vz-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--vz-fg-strong);
}

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

code, .vz-mono, .vibz-mono {
  font-family: var(--vz-font-mono);
  font-size: 0.92em;
}