/* =====================================================
   CallScraper — Colors & Typography
   Eggplant base + signal red brand. Dark-first.
   ===================================================== */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --brand-red:        #E50914;   /* primary signal — logo, CTAs, alerts of intent */
  --brand-red-deep:   #B30710;
  --brand-red-glow:   rgba(229, 9, 20, 0.45);
  --brand-black:      #0A0A0A;   /* logo's near-black "Scraper" wordmark */
  --brand-white:      #FFFFFF;

  /* ── Eggplant surfaces (primary product palette) ───── */
  --bg-base:        #0F0820;   /* canvas */
  --bg-surface:     #170C2C;   /* sidebars, navs */
  --bg-card:        #1F1138;   /* cards, modals */
  --bg-hover:       #2C1A4F;   /* hover wash */
  --bg-raised:      #261545;   /* popovers, raised */
  --border:         #322052;
  --border-strong:  #4A2F75;
  --border-subtle:  #241445;

  /* ── Foreground ───────────────────────────────────── */
  --fg-1: #F3ECFF;   /* primary text — soft lavender-white */
  --fg-2: #B9A7D8;   /* secondary text */
  --fg-3: #6E5B8E;   /* faint / placeholder */
  --fg-on-red: #FFFFFF;

  /* ── Functional accents ───────────────────────────── */
  --accent-blue:    #3B82F6;   /* links, info, CRM source */
  --accent-cyan:    #22D3EE;   /* SMS, live data */
  --accent-purple:  #A78BFA;   /* email, agent identity */
  --accent-green:   #22C55E;   /* success, attribution win */
  --accent-orange:  #F97316;   /* SmartMoving brand link */
  --accent-amber:   #EAB308;   /* warnings, queue */
  --accent-red:     #EF4444;   /* errors (separate from brand-red) */

  /* ── Semantic role aliases ────────────────────────── */
  --info-fg:    var(--accent-blue);
  --success-fg: var(--accent-green);
  --warn-fg:    var(--accent-amber);
  --danger-fg:  var(--accent-red);

  --info-bg:    rgba(59, 130, 246, 0.12);
  --success-bg: rgba(34, 197, 94, 0.12);
  --warn-bg:    rgba(234, 179, 8, 0.12);
  --danger-bg:  rgba(239, 68, 68, 0.12);
  --brand-bg:   rgba(229, 9, 20, 0.14);

  /* ── Spacing ──────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ── Radius — pills are core to the brand ─────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill: 9999px;     /* THE pill — used on buttons, chips, badges */

  /* ── Shadows ──────────────────────────────────────── */
  --shadow-sm:    0 2px 8px rgba(0,0,0,.30);
  --shadow-card:  0 4px 24px rgba(0,0,0,.40);
  --shadow-lg:    0 8px 40px rgba(0,0,0,.50);
  --shadow-pop:   0 12px 48px rgba(0,0,0,.55);
  --glow-red:     0 0 24px rgba(229, 9, 20, 0.55);
  --glow-cyan:    0 0 16px rgba(34, 211, 238, 0.5);

  /* ── Motion ───────────────────────────────────────── */
  --ease-out:  cubic-bezier(.2,.7,.2,1);
  --dur-fast:  140ms;
  --dur-med:   240ms;
  --dur-slow:  480ms;

  /* ── Layout ───────────────────────────────────────── */
  --nav-h:     60px;
  --sidebar-w: 220px;

  /* ── Typography stacks ────────────────────────────── */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-marketing-display: 'Bungee Inline', 'Space Grotesk', sans-serif; /* used in marketing posters only */

  /* ── Type scale ───────────────────────────────────── */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  64px;
  --fs-display: 76px;

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tr-tight:  -0.03em;
  --tr-snug:   -0.02em;
  --tr-normal: 0;
  --tr-wide:   0.04em;
  --tr-mono:   0.02em;
}

/* =====================================================
   Semantic element styles — apply by class for free
   ===================================================== */

.cs-display, h1.cs-display {
  font-family: var(--font-display);
  font-size:   var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.cs-h1, h1 {
  font-family: var(--font-display);
  font-size:   var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}
.cs-h2, h2 {
  font-family: var(--font-display);
  font-size:   var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}
.cs-h3, h3 {
  font-family: var(--font-sans);
  font-size:   var(--fs-md);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-1);
}

.cs-body, p {
  font-family: var(--font-sans);
  font-size:   var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.cs-secondary { color: var(--fg-2); }
.cs-faint     { color: var(--fg-3); }

.cs-eyebrow, .eyebrow {
  font-family: var(--font-mono);
  font-size:   var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.cs-mono, code, kbd {
  font-family: var(--font-mono);
  font-size:   0.92em;
  letter-spacing: var(--tr-mono);
  font-variant-numeric: tabular-nums;
}

.cs-stat {
  font-family: var(--font-display);
  font-size:   var(--fs-2xl);
  font-weight: 600;
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}