/* ============================================================================
   VoiceRubric — Color & Type Foundations
   Warm, friendly, professional. The anti-cold-corporate-blue.
   Import this file, then use the CSS variables below.
   ============================================================================ */

/* ---- Fonts (Google Fonts) -------------------------------------------------
   Display : Schibsted Grotesk  — warm, characterful grotesk for headings/logo
   Text/UI : Hanken Grotesk     — highly legible at small sizes, friendly
   Mono    : JetBrains Mono     — timestamps, tabular data, transcript meta
   If you have licensed font files, drop them in fonts/ and swap the @import.   */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --coral:        #F0573C;   /* primary — warm coral, the VoiceRubric signature */
  --coral-600:    #DA4327;   /* hover / pressed */
  --coral-700:    #B9351D;   /* deep */
  --coral-100:    #FCE6DE;   /* tint surface */
  --coral-50:     #FEF4F0;   /* faintest wash */

  --aubergine:    #45243E;   /* secondary — deep warm plum, dark surfaces & nav */
  --aubergine-700:#341B2F;   /* deeper plum */
  --aubergine-900:#241320;   /* near-black plum */
  --plum:         #7A4E6C;   /* muted plum accent */
  --plum-200:     #E7DAE2;   /* plum tint */

  --gold:         #F2A23B;   /* accent — warm amber, scores & highlights */
  --gold-600:     #D9831C;
  --gold-100:     #FBEFD9;

  /* ── Logo signifiers ───────────────────────────────────────────────────── */
  --recording:    #F5163B;   /* live recording LED in the mark + live UI dots */
  --mint:         #2FD46E;   /* the "scored" check in the logo / success accent */

  /* ── Constructive score bands (warm, never harsh red/green) ────────────── */
  --strong:       #4F9579;   --strong-bg:   #E7F1EC;   --strong-ink:  #2F6B52;
  --solid:        #D98C2A;   --solid-bg:    #FBF0DC;   --solid-ink:   #95610F;
  --emerging:     #CE6F4A;   --emerging-bg: #FAE8DE;   --emerging-ink:#9E4F2C;

  /* ── Warm neutrals (taupe/sand, NOT cold slate) ────────────────────────── */
  --ink:          #2A2522;   /* primary text — warm near-black */
  --ink-2:        #5E554E;   /* secondary text */
  --ink-3:        #978B82;   /* tertiary / muted text */
  --line:         #EBE3DB;   /* hairline borders */
  --line-2:       #DBD1C7;   /* stronger borders */
  --surface:      #FFFFFF;   /* cards */
  --bg:           #FAF6F1;   /* app background — warm cream */
  --bg-2:         #F3ECE4;   /* sunken panels */
  --bg-3:         #ECE2D8;   /* deeper sand */

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-pill: 999px;

  /* ── Shadows (warm-tinted, soft) ───────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(58,38,28,.06);
  --shadow:    0 2px 4px rgba(58,38,28,.05), 0 8px 22px rgba(58,38,28,.07);
  --shadow-lg: 0 18px 48px rgba(58,38,28,.14);
  --shadow-coral: 0 2px 6px rgba(240,87,60,.28), 0 10px 24px rgba(240,87,60,.20);

  /* ── Type families ─────────────────────────────────────────────────────── */
  --font-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-text:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale (semantic) ─────────────────────────────────────────────── */
  --fs-display: 3.25rem;  /* 52px — hero */
  --fs-h1:      2.25rem;  /* 36px */
  --fs-h2:      1.625rem; /* 26px */
  --fs-h3:      1.25rem;  /* 20px */
  --fs-lg:      1.0625rem;/* 17px — lead paragraph */
  --fs-body:    0.9375rem;/* 15px — default UI text */
  --fs-sm:      0.8125rem;/* 13px */
  --fs-xs:      0.6875rem;/* 11px — labels, eyebrows */
}

/* ── Base element styles (opt-in via .vr-type or use vars directly) ──────── */
.vr-type, .vr-type * { font-family: var(--font-text); color: var(--ink); }

.vr-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.vr-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.vr-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.vr-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.vr-lead {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: 1.62;
  color: var(--ink-2);
}
.vr-body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
}
.vr-sm {
  font-family: var(--font-text);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.vr-eyebrow {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vr-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}