/* ============================================================
   Whtvr.AI — Color & Type Foundations
   Conversational AI embedded in your site.
   Light-primary system: zinc neutrals + coral brand + sunset gradient accent.
   ============================================================ */

/* Geist — modern, neutral, dev/AI feel (avoids Inter/Roboto cliché) */
/* Instrument Serif — editorial high-contrast display serif for headlines */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- Brand: Coral (sampled from logo #D95135) ---------- */
  --coral-50:  #FDF1ED;
  --coral-100: #FADFD6;
  --coral-200: #F5BCAB;
  --coral-300: #EE9078;
  --coral-400: #E56F52;
  --coral-500: #D95135;   /* brand primary */
  --coral-600: #C13F26;
  --coral-700: #A0301C;
  --coral-800: #7E2818;
  --coral-900: #5E2014;

  /* ---------- Accent: Sunset gradient (from chat-widget glow) ---------- */
  --grad-orange:  #F98C53;
  --grad-pink:    #F472B6;
  --grad-magenta: #EA77EC;
  --gradient-sunset: linear-gradient(90deg, var(--grad-orange) 0%, var(--grad-pink) 52%, var(--grad-magenta) 100%);
  --gradient-sunset-diag: linear-gradient(115deg, var(--grad-orange) 0%, var(--grad-pink) 50%, var(--grad-magenta) 100%);

  /* ---------- Neutrals: Zinc ---------- */
  --zinc-950: #09090B;
  --zinc-900: #18181B;
  --zinc-800: #27272A;
  --zinc-700: #3F3F46;
  --zinc-600: #52525B;
  --zinc-500: #71717A;
  --zinc-400: #A1A1AA;
  --zinc-300: #D4D4D8;
  --zinc-200: #E4E4E7;
  --zinc-100: #F4F4F5;
  --zinc-50:  #FAFAFA;
  --white:    #FFFFFF;

  /* ---------- Semantic (light) ---------- */
  --bg:            #FFFFFF;
  --bg-subtle:     #FAFAFA;
  --bg-muted:      #F4F4F5;
  --surface:       #FFFFFF;
  --surface-inset: #FAFAFA;
  --border:        #E9E9EC;
  --border-strong: #D4D4D8;

  --fg:        #09090B;
  --fg-muted:  #52525B;
  --fg-subtle: #8A8A93;
  --fg-ondark: #FAFAFA;

  --primary:        var(--coral-500);
  --primary-hover:  var(--coral-600);
  --primary-press:  var(--coral-700);
  --on-primary:     #FFFFFF;
  --ring:           color-mix(in oklch, var(--coral-500) 45%, transparent);

  /* status */
  --success: #1F8A5B;
  --warning: #C77B0A;
  --danger:  #C13F26;

  /* ---------- Type families ---------- */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (fluid-ish, px base) ---------- */
  --text-eyebrow: 0.75rem;   /* 12 — tracked uppercase label */
  --text-xs:   0.8125rem;    /* 13 */
  --text-sm:   0.875rem;     /* 14 */
  --text-base: 1rem;         /* 16 */
  --text-lg:   1.125rem;     /* 18 */
  --text-xl:   1.375rem;     /* 22 */
  --text-2xl:  1.75rem;      /* 28 */
  --text-3xl:  2.25rem;      /* 36 */
  --text-4xl:  3rem;         /* 48 */
  --text-5xl:  3.75rem;      /* 60 */
  --text-6xl:  4.75rem;      /* 76 */

  --leading-tight: 1.05;
  --leading-snug:  1.18;
  --leading-normal:1.55;
  --leading-relaxed:1.7;

  --tracking-eyebrow: 0.14em;
  --tracking-tight:  -0.02em;
  --tracking-tighter:-0.035em;

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 30px;
  --radius-pill: 999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* ---------- Shadows (soft, low-spread, neutral) ---------- */
  --shadow-xs: 0 1px 2px rgba(9,9,11,0.05);
  --shadow-sm: 0 1px 3px rgba(9,9,11,0.06), 0 1px 2px rgba(9,9,11,0.04);
  --shadow-md: 0 4px 12px rgba(9,9,11,0.07), 0 2px 4px rgba(9,9,11,0.04);
  --shadow-lg: 0 12px 32px rgba(9,9,11,0.09), 0 4px 10px rgba(9,9,11,0.04);
  --shadow-xl: 0 28px 64px rgba(9,9,11,0.13), 0 10px 24px rgba(9,9,11,0.06);
  --shadow-glow: 0 0 0 1px rgba(217,81,53,0.10), 0 10px 40px rgba(217,81,53,0.18);
}

/* ============================================================
   Semantic element styles — apply via classes
   ============================================================ */
.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ds-h1 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg);
  text-wrap: balance;
}
.ds-h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}
.ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.ds-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg);
}
.ds-lead {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.ds-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-subtle);
}
.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
  color: var(--fg);
}
.ds-gradient-text {
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}