/* ============================================================
   conva — design tokens
   Single source of truth for the whole site's theme.
   Swap these values to re-theme everything.
   Palette matches the conva app (dark theme) — see the brand
   handoff in conva_core. A finalized palette can replace these
   without touching any component styles.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- surfaces ---- */
  --void: #05060e;          /* page background */
  --deep: #0a0e1e;          /* alternating sections */
  --panel: #070a16;         /* feature / section blocks */
  --panel-2: #0c1124;       /* raised card top */
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --hairline: rgba(255, 255, 255, 0.05);
  --rim: rgba(180, 210, 255, 0.28);

  /* ---- iris signature (accent only) ---- */
  --iris: linear-gradient(100deg, #22e4f5 0%, #7b5cff 52%, #ff4fd8 100%);
  --cyan: #22e4f5;          /* THEM — the other person */
  --violet: #8b6bff;        /* YOU */
  --gold: #ffc24b;          /* AI */
  --magenta: #ff4fd8;

  /* voice tints */
  --cyan-bg: rgba(34, 228, 245, 0.09);   --cyan-line: rgba(34, 228, 245, 0.28);
  --violet-bg: rgba(139, 107, 255, 0.10); --violet-line: rgba(139, 107, 255, 0.30);
  --gold-bg: rgba(255, 194, 75, 0.08);    --gold-line: rgba(255, 194, 75, 0.30);

  /* states */
  --danger: #ff5468;
  --success: #58e0b0;

  /* ---- text ---- */
  --text: #eef1ff;
  --text-2: #a3accc;
  --muted: #8e97b8;
  --faint: #6e7799;
  --on-iris: #05060e;       /* text on iris fills */

  /* ---- type ---- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mark: "Michroma", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  /* ---- radii ---- */
  --r-8: 8px;
  --r-11: 11px;
  --r-12: 12px;
  --r-18: 18px;
  --r-26: 26px;
  --r-pill: 999px;

  /* ---- shadows / glow ---- */
  --shadow-iris: 0 12px 40px rgba(123, 92, 255, 0.32);
  --shadow-card: 0 20px 60px rgba(2, 4, 12, 0.5);
  --focus-ring: 0 0 0 3px rgba(34, 228, 245, 0.4);

  /* ---- layout ---- */
  --maxw: 1200px;
  --gutter: clamp(1.15rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 11vw, 8.5rem);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- light theme (dark is primary; this is a tasteful remap) ---- */
:root[data-theme="light"] {
  color-scheme: light;

  --void: #eef1f8;
  --deep: #e7ebf5;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --glass: rgba(11, 17, 34, 0.03);
  --glass-strong: rgba(11, 17, 34, 0.06);
  --border: rgba(11, 20, 45, 0.12);
  --border-strong: rgba(11, 20, 45, 0.22);
  --hairline: rgba(11, 20, 45, 0.06);
  --rim: rgba(60, 90, 160, 0.28);

  --cyan-bg: rgba(6, 150, 168, 0.10);   --cyan-line: rgba(6, 150, 168, 0.35);
  --violet-bg: rgba(96, 66, 220, 0.10); --violet-line: rgba(96, 66, 220, 0.32);
  --gold-bg: rgba(184, 120, 10, 0.10);  --gold-line: rgba(184, 120, 10, 0.35);

  --text: #0b1330;
  --text-2: #3a4468;
  --muted: #55618a;
  --faint: #5a6488;
  --on-iris: #05060e;

  --shadow-iris: 0 14px 40px rgba(123, 92, 255, 0.28);
  --shadow-card: 0 24px 60px rgba(30, 46, 90, 0.16);
}