/* ════════════════════════════════════════════════════════════════
   AI ResearchPartner — Design Tokens
   Lifted directly from /static/css/style.css and /templates/dashboard_base.html
   so the marketing site renders pixel-identical to the product surface.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Surface */
  --bg: #f5f4ed;
  --bg-dark: #141413;
  --surface: #faf9f5;
  --surface-2: #ffffff;
  --surface-dark: #1f1e1c;
  --sand: #e8e6dc;

  /* Text */
  --text: #141413;
  --text2: #5e5d59;
  /* Darkened from #87867f so muted text clears WCAG AA (4.5:1) on the cream
     surfaces. The old value was ~3.6:1 — fine for large text, short for body. */
  --text3: #6b6a63;
  --text-inv: #faf9f5;
  --text-inv2: #b0aea5;

  /* Brand */
  --brand: #c96442;
  --brand-deep: #a64c2c;
  --coral: #d97757;
  --gold: #d9a441;  /* PRO accent — matches the ✦ gold used across the PRO surfaces */
  --charcoal: #4d4c48;

  /* Borders + rings */
  --border: #f0eee6;
  --border2: #e8e6dc;
  --border-dark: #2a2a28;
  --ring: #d1cfc5;
  --ring-deep: #c2c0b6;

  /* Semantic */
  --green: #16a34a;
  --green-dim: rgba(22, 163, 74, 0.10);
  --amber: #b45309;
  --amber-dim: rgba(180, 83, 9, 0.10);
  --sky: #2563eb;
  --sky-dim: rgba(37, 99, 235, 0.10);
  --rose: #be123c;
  --rose-dim: rgba(190, 18, 60, 0.10);
  --accent-dim: rgba(201, 100, 66, 0.10);

  /* Radius + shadow */
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --shadow-whisper: 0 4px 24px rgba(0, 0, 0, 0.05);
  --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-deep: 0 18px 60px rgba(20, 20, 19, 0.12);
  --shadow-ring: 0 0 0 1px var(--ring);

  /* Layout */
  --max-w: 1200px;
  --gutter: 40px;
  --gutter-sm: 18px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 0.18s;
  --t-mid: 0.32s;
  --t-slow: 0.6s;
}

/* ── DARK SURFACE TOKENS (used inside .surface-dark blocks for product/demo) ── */
.surface-dark {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface-2: #242836;
  --border: #2e3348;
  --text: #e2e4ed;
  --text2: #b0b4c5;
  --text3: #8b8fa3;
  background: #0f1117;
  color: #e2e4ed;
}