/* ─────────────────────────────────────────────────────────────────────────
   vybesync — colors & type tokens
   ─────────────────────────────────────────────────────────────────────────
   Source of truth for the brand. Mirrors app/src/index.css from the
   product codebase (vybesync app), with light reorganization for design
   work. Use these CSS variables in any HTML/JSX produced for the brand.

   Brand palette (per official brand board):
     Vybe Orange   #FF6A00   primary
     Burnt Orange  #FFA400   highlight
     Soft Orange   #FFB24D   warm accent
     Onyx          #0A0A0A   ground
     White         #FFFFFF   pure light
     Vybe Purple   #7B3DFF   secondary (live-mode / variant accent)
     Electric Pur. #B84DFF   secondary highlight
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand palette ─────────────────────────────────────────────── */
  --vs-orange:        #FF6A00;   /* Vybe Orange — primary */
  --vs-orange-burnt:  #FFA400;   /* Burnt Orange — highlight */
  --vs-orange-soft:   #FFB24D;   /* Soft Orange — warm accent */
  --vs-orange-dim:    #FF6A0022; /* Orange @ 13% — chip/hover wash */

  --vs-purple:           #7B3DFF;
  --vs-purple-electric:  #B84DFF;
  --vs-purple-dim:       #7B3DFF22;

  --vs-onyx:    #0A0A0A;   /* primary background */
  --vs-white:   #FFFFFF;

  /* ── Surfaces (dark-first) ─────────────────────────────────────── */
  --vs-bg:        #0A0A0A;   /* page ground (Onyx) */
  --vs-surface:   #131313;   /* cards, top bar */
  --vs-surface2:  #1C1C1C;   /* sub-cards, inputs */
  --vs-surface3:  #242424;   /* hover, scrubbers */
  --vs-border:        #2A2A2A;
  --vs-border-bright: #3A3A3A;

  /* ── Foreground / text ─────────────────────────────────────────── */
  --vs-fg:         #F0F0F0;
  --vs-fg-muted:   #777777;
  --vs-fg-dim:     #444444;

  /* ── Semantic ──────────────────────────────────────────────────── */
  --vs-danger:        #FF3B3B;
  --vs-danger-dim:    #FF3B3B22;
  --vs-success:       #3BFF7A;
  --vs-success-dim:   #3BFF7A22;
  --vs-warn:          #FFB24D;
  --vs-warn-dim:      #FFB24D22;

  /* ── Live-mode priority (used in action grid + lead queue) ─────── */
  --vs-prio-red:    #FF3B3B;
  --vs-prio-yellow: #FFB347;
  --vs-prio-green:  #3BFF7A;

  /* ── Type ──────────────────────────────────────────────────────── */
  --vs-font:      'Quicksand', system-ui, -apple-system, sans-serif;
  --vs-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — Quicksand-tuned. Lighter weights system-wide; bold (700)
     reserved for uppercase attention treatments only (status pills, action
     tile labels, nav labels). */
  --vs-h1:    500 28px/1.15 var(--vs-font);   /* screen titles  */
  --vs-h2:    500 22px/1.2  var(--vs-font);   /* section heroes */
  --vs-h3:    400 18px/1.3  var(--vs-font);   /* card titles    */
  --vs-body:    300 15px/1.5 var(--vs-font);
  --vs-body-sm: 300 13px/1.5 var(--vs-font);
  --vs-label:   400 11px/1.2 var(--vs-font);  /* eyebrow — pair with
                                                 letter-spacing 0.16em
                                                 + uppercase */
  --vs-meta:    300 10px/1.2 var(--vs-font);

  /* Letter-spacing presets — Quicksand sits more open than Sora */
  --vs-track-tight:   -0.005em;  /* h1, h2 */
  --vs-track-eyebrow:  0.16em;   /* uppercase labels */
  --vs-track-badge:    0.08em;   /* status badges */

  /* ── Shape ─────────────────────────────────────────────────────── */
  --vs-radius:    14px;   /* card, primary button */
  --vs-radius-sm:  8px;   /* input, ghost button */
  --vs-radius-xs:  5px;   /* swatch, chip */
  --vs-radius-pill: 99px; /* pill chip, badge */

  /* ── Elevation / glow ──────────────────────────────────────────── */
  --vs-shadow-fab:    0 6px 20px rgba(255, 106, 0, 0.45);   /* floating orange button */
  --vs-shadow-card:   0 1px 0 rgba(255,255,255,0.02) inset;
  --vs-glow-orange:   0 0 16px 2px rgba(255, 164, 0, 0.45);
  --vs-glow-purple:   0 0 16px 2px rgba(184,  77, 255, 0.45);

  /* ── Gradients (use sparingly — primary CTA + progress only) ───── */
  --vs-grad-orange:   linear-gradient(135deg, #FF6A00, #FFA400);
  --vs-grad-orange-h: linear-gradient(90deg,  #FF6A00, #FFA400);  /* horizontal — progress bar */
  --vs-grad-purple:   linear-gradient(135deg, #7B3DFF, #B84DFF);
  --vs-grad-text:     linear-gradient(135deg, #FFA400, #FF6A00);  /* on .gradient-text */
}

/* ── Semantic resets ─────────────────────────────────────────────── */
html, body {
  background: var(--vs-bg);
  color: var(--vs-fg);
  font: var(--vs-body);
  -webkit-font-smoothing: antialiased;
}

h1 { font: var(--vs-h1); letter-spacing: var(--vs-track-tight); }
h2 { font: var(--vs-h2); letter-spacing: var(--vs-track-tight); }
h3 { font: var(--vs-h3); }
p  { font: var(--vs-body); color: var(--vs-fg); }
small, .meta { font: var(--vs-meta); color: var(--vs-fg-muted); }

/* Eyebrow label — uppercase with tracked letter-spacing.
   Use for section labels, "PRE-SHIFT · STEP 2 OF 4", etc. */
.eyebrow,
.section-label {
  font: var(--vs-label);
  letter-spacing: var(--vs-track-eyebrow);
  text-transform: uppercase;
  color: var(--vs-fg-muted);
}

/* Gradient text — DO NOT USE on product UI text. Brand rule: gradients
   live on fills only (CTAs, progress bars). Class kept for legacy
   marketing surfaces. */
.gradient-text {
  background: var(--vs-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Backwards-compat aliases — match app/src/index.css names ────── */
:root {
  --orange:           var(--vs-orange);
  --orange-burnt:     var(--vs-orange-burnt);
  --orange-soft:      var(--vs-orange-soft);
  --orange-dim:       var(--vs-orange-dim);
  --amber:            var(--vs-orange-soft);
  --purple:           var(--vs-orange);          /* legacy alias from app */
  --purple-electric:  var(--vs-orange-burnt);
  --purple-dim:       var(--vs-orange-dim);

  --bg:           var(--vs-bg);
  --surface:      var(--vs-surface);
  --surface2:     var(--vs-surface2);
  --surface3:     var(--vs-surface3);
  --border:       var(--vs-border);
  --border-bright: var(--vs-border-bright);
  --text:         var(--vs-fg);
  --text-muted:   var(--vs-fg-muted);
  --text-dim:     var(--vs-fg-dim);
  --danger:       var(--vs-danger);
  --danger-dim:   var(--vs-danger-dim);
  --success:      var(--vs-success);
  --success-dim:  var(--vs-success-dim);
  --warn:         var(--vs-warn);
  --warn-dim:     var(--vs-warn-dim);
  --font:         var(--vs-font);
  --radius:       var(--vs-radius);
  --radius-sm:    var(--vs-radius-sm);
  --radius-xs:    var(--vs-radius-xs);
}