/* Whisperin — Design Tokens (source-faithful, anti-drift)
   Values derived 1:1 from abgcmo.com CSS (see deliverables/02-clone-blueprint/exact-color-system.md).
   AESTHETIC = wine/burgundy + rose-pink, DARK. Never inherit v1's amber/cyan light theme. */

/* ---- Satoshi (self-hosted; 300 is ABGCMO's exact mirror woff2) ---- */
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  /* ===== Color: wine-rose marketing theme ===== */
  --wi-bg-deep:#1a0510;
  --wi-bg:radial-gradient(ellipse at top,#4a1530 0%,#2a0a18 55%,#1a0510 100%);
  --wi-bg-glow:radial-gradient(circle at 56% 36%,rgba(111,20,58,.72),transparent 42%),linear-gradient(180deg,#2a0a18,#210711 54%,#14050b);
  --wi-dotgrid:radial-gradient(circle at 1px 1px,rgba(255,255,255,.04) 1px,transparent 0);

  --wi-surface:#2a0a18;
  --wi-surface-2:#371123;
  /* ABGCMO light-white glass (measured) */
  --wi-glass-bg:rgba(255,255,255,.05);
  --wi-glass-strong:rgba(255,255,255,.08);
  --wi-glass-border:rgba(255,255,255,.12);
  --wi-glass-btn-bg:rgba(255,255,255,.08);
  --wi-glass-btn-border:rgba(255,255,255,.22);
  --wi-blur:blur(16px);

  --wi-accent:#f0b0c8;
  --wi-accent-2:#e891b2;
  --wi-accent-3:#d4789a;
  --wi-accent-hot:#ff8fa8;
  --wi-cta:linear-gradient(135deg,#f0b0c8,#e891b2);
  --wi-cta-hover:linear-gradient(100deg,#f5bcd0,#e07ea6);
  --wi-text-gradient:linear-gradient(135deg,#fff 24%,#ff8fa8);

  /* ABGCMO off-white text on the bg.jpeg layer (measured) */
  --wi-text:#ffffff;
  --wi-text-muted:rgba(255,255,255,.65);
  --wi-text-subtle:rgba(255,255,255,.45);
  --wi-text-faint:rgba(255,255,255,.4);

  --wi-border:rgba(255,255,255,.12);
  --wi-border-strong:rgba(255,255,255,.22);

  --wi-success:#22c55e; --wi-danger:#ef4444; --wi-warning:#ffbd2e;
  --wi-tl-red:#ff5f56; --wi-tl-yellow:#ffbd2e; --wi-tl-green:#27c93f;

  --wi-glow:0 0 16px rgba(255,143,168,.06);
  --wi-glow-strong:0 10px 40px rgba(232,145,178,.28);
  --wi-shadow-card:0 12px 30px rgba(0,0,0,.28);
  --wi-shadow-pop:0 16px 64px rgba(0,0,0,.6);
  --wi-focus:0 0 0 3px rgba(255,255,255,.92),0 0 0 6px rgba(240,176,200,.45);

  /* ===== Type ===== */
  --wi-font:"Satoshi",-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --fs-hero:clamp(2.25rem,5vw,3.5rem);
  --fs-h2:clamp(1.75rem,3.5vw,2.75rem);
  --fs-h3:1.0625rem;
  --fs-lead:clamp(.95rem,1.5vw,1.15rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-micro:.75rem;
  --fs-stat:clamp(2.6rem,5vw,3.75rem);
  --lh-tight:1.1; --lh-snug:1.3; --lh-body:1.7;

  /* ===== Space (4px base) ===== */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;--s20:80px;--s24:96px;--s30:120px;
  --section-y:clamp(120px,16vh,220px);
  --container:1200px; --reading:720px;

  /* ===== Radii ===== */
  --r-pill:999px; --r-sm:12px; --r-card:20px; --r-card-lg:24px; --r-media:40px;

  /* ===== Motion ===== */
  --dur-instant:80ms;--dur-fast:160ms;--dur-base:280ms;--dur-slow:520ms;--dur-cinematic:900ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-decelerate:cubic-bezier(0,0,.2,1);
  --ease-accelerate:cubic-bezier(.4,0,1,1);
  --ease-emphasized:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --stagger-line:80ms;--stagger-word:40ms;--stagger-group:120ms;

  /* ===== App shell ===== */
  --app-sidebar:208px; --app-topbar:52px; --app-gutter:14px;

  /* ===== Z ===== */
  --z-base:0;--z-raise:10;--z-header:100;--z-dropdown:200;--z-backdrop:900;--z-modal:1000;--z-toast:1100;
}

/* ===== App cool-noir theme (dashboard / generation room) ===== */
.wi-app{
  --wi-bg:#0c1014;
  --wi-surface:#0a0a0c;
  --wi-surface-2:#11141a;
  --wi-glass-bg:rgba(255,255,255,.03);
  --wi-glass-strong:rgba(12,16,20,.8);
  --wi-border:rgba(255,255,255,.08);
  --wi-border-strong:rgba(255,255,255,.16);
  --wi-text:#ffffff;
  --wi-text-muted:#a3a3a3;
  --wi-text-subtle:rgba(255,255,255,.5);
  --wi-live:#3b82f6;            /* realtime/room accent (source --lk-accent) */
  /* rose accent + CTA retained for brand continuity */
}