/* ============================================================
   ELVA — "Apple Era" design tokens (marketing-page subset)
   ============================================================ */
/* Use the marketing site's system font stack; JetBrains Mono for kbd/code */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Surfaces (light, paper-like) ------------------------ */
  --cream-0: #F5F5F7;
  --cream-1: #FFFFFF;
  --cream-2: #E7E7EC;
  --cream-shadow: #D6D6DC;
  --surface-mute: #EFEFF2;

  /* ---- Primary "ink" accent (Apple graphite) --------------- */
  --sage-0: #1D1D1F;
  --sage-1: #3A3A3C;
  --sage-2: #C7C7CC;
  --sage-3: #F0EFFB;

  /* ---- Ink / text ramp ------------------------------------- */
  --ink-0: #1D1D1F;
  --ink-1: #2D2D2F;
  --ink-2: #6E6E73;
  --ink-3: #8A8A8F;
  --ink-4: #B0B0B6;

  /* ---- Semantic ------------------------------------------- */
  --success: #2E7D54;
  --success-tint: rgba(47, 138, 91, 0.12);
  --gold: #C0892E;
  --gold-tint: rgba(192, 137, 46, 0.14);
  --terracotta: #C75A3F;
  --terracotta-tint: rgba(199, 90, 63, 0.14);
  --info: #5B8DEF;
  --info-tint: rgba(91, 141, 239, 0.12);
  --star: #E8A93C;

  /* ---- Spectrum (Apple-Intelligence) accents --------------- */
  --ai-1: #FFB7A8;
  --ai-2: #FFA9C9;
  --ai-3: #9B5CFF;
  --ai-4: #5B8DEF;
  --ai-5: #3FB8A8;
  --ai-g1: #C9B6FF;
  --ai-g2: #AFC8FF;
  --ai-tint: rgba(155, 92, 255, 0.12);
  --glow-strength: 0.4;

  --grad-spectrum: linear-gradient(100deg, var(--ai-3), var(--ai-4) 46%, var(--ai-5) 86%);
  --grad-ink: linear-gradient(160deg, var(--sage-1), var(--sage-0));

  /* ---- Type ------------------------------------------------ */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

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

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

  /* ---- Radius --------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 26px; --r-pill: 999px;

  /* ---- Shadow / elevation --------------------------------- */
  --sh-1: 0 1px 3px rgba(20, 20, 30, 0.04);
  --sh-2: 0 18px 44px -28px rgba(20, 20, 30, 0.28), 0 1px 3px rgba(20, 20, 30, 0.04);
  --sh-3: 0 24px 60px -24px rgba(20, 20, 30, 0.34), 0 2px 6px rgba(20, 20, 30, 0.06);
  --sh-4: 0 40px 90px -40px rgba(20, 20, 30, 0.42), 0 4px 12px rgba(20, 20, 30, 0.07);
  --sh-btn: 0 10px 22px -12px rgba(20, 20, 30, 0.6);

  /* ---- Motion --------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.8, 0.36, 1);
  --dur-fast: 0.12s;
  --dur-med: 0.4s;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream-0); color: var(--ink-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ai-tint); }
:focus-visible { outline: 2px solid var(--ai-4); outline-offset: 2px; }

.elva-spectrum {
  background: var(--grad-spectrum);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* live presence dot */
.elva-live { position: relative; display: inline-flex; width: 8px; height: 8px; flex: none; }
.elva-live::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--ai-3); box-shadow: 0 0 8px var(--ai-3); }
.elva-live::after { content: ''; position: absolute; inset: -2px; border-radius: 999px; border: 1.5px solid var(--ai-3); animation: elva-pulse 2.4s cubic-bezier(0.4,0,0.2,1) infinite; }
@keyframes elva-pulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }