:root {
    --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
    --fs-lg: 20px; --fs-xl: 24px;
    --fs-2xl: clamp(26px, 3vw, 32px);
    --fs-3xl: clamp(32px, 5vw, 44px);

    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

    --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

    --ease: cubic-bezier(.2, .7, .2, 1);
    --t-fast: 150ms; --t-med: 250ms;

    /* stage colors (theme independent hues) */
    --stage-connect: #6366f1;
    --stage-accepted: #22d3ee;
    --stage-chat: #8b5cf6;
    --stage-close: #34d399;
  }

  /* Dark (default) */
  :root,
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0d14;
    --bg-mesh:
      radial-gradient(900px 500px at 10% -10%, rgb(79 70 229 / .28), transparent 60%),
      radial-gradient(800px 500px at 100% 0%, rgb(139 92 246 / .22), transparent 60%),
      radial-gradient(700px 500px at 60% 110%, rgb(34 211 238 / .12), transparent 60%);
    --surface: rgb(255 255 255 / .06);
    --surface-hover: rgb(255 255 255 / .10);
    --surface-solid: #12151f;
    --surface-solid-2: #171b28;
    --border: rgb(255 255 255 / .10);
    --border-strong: rgb(255 255 255 / .18);
    --text: #f3f4f8;
    --text-muted: #9aa3b8;
    --primary: #6366f1;
    --primary-ink: #ffffff;
    --primary-soft: rgb(99 102 241 / .18);
    --accent: #22d3ee;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --success-soft: rgb(52 211 153 / .15);
    --warning-soft: rgb(251 191 36 / .15);
    --danger-soft: rgb(248 113 113 / .15);
    --shadow: 0 1px 0 rgb(255 255 255 / .05) inset, 0 12px 32px -12px rgb(0 0 0 / .55);
    --glass-blur: 20px;
  }

  /* Light */
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f6fb;
    --bg-mesh:
      radial-gradient(900px 500px at 10% -10%, rgb(79 70 229 / .13), transparent 60%),
      radial-gradient(800px 500px at 100% 0%, rgb(139 92 246 / .12), transparent 60%),
      radial-gradient(700px 500px at 60% 110%, rgb(6 182 212 / .10), transparent 60%);
    --surface: rgb(255 255 255 / .70);
    --surface-hover: rgb(255 255 255 / .92);
    --surface-solid: #ffffff;
    --surface-solid-2: #f0f2f9;
    --border: rgb(15 23 42 / .08);
    --border-strong: rgb(15 23 42 / .16);
    --text: #0f172a;
    --text-muted: #5b6478;
    --primary: #4f46e5;
    --primary-soft: rgb(79 70 229 / .10);
    --accent: #06b6d4;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --success-soft: rgb(16 185 129 / .12);
    --warning-soft: rgb(245 158 11 / .14);
    --danger-soft: rgb(239 68 68 / .12);
    --shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 10px 30px -14px rgb(30 41 90 / .25);
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      color-scheme: light;
      --bg: #f5f6fb;
      --bg-mesh:
        radial-gradient(900px 500px at 10% -10%, rgb(79 70 229 / .13), transparent 60%),
        radial-gradient(800px 500px at 100% 0%, rgb(139 92 246 / .12), transparent 60%);
      --surface: rgb(255 255 255 / .70);
      --surface-hover: rgb(255 255 255 / .92);
      --surface-solid: #ffffff;
      --surface-solid-2: #f0f2f9;
      --border: rgb(15 23 42 / .08);
      --border-strong: rgb(15 23 42 / .16);
      --text: #0f172a;
      --text-muted: #5b6478;
      --primary: #4f46e5;
      --primary-soft: rgb(79 70 229 / .10);
      --accent: #06b6d4;
      --success: #10b981;
      --warning: #f59e0b;
      --danger: #ef4444;
      --success-soft: rgb(16 185 129 / .12);
      --warning-soft: rgb(245 158 11 / .14);
      --danger-soft: rgb(239 68 68 / .12);
      --shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 10px 30px -14px rgb(30 41 90 / .25);
    }
  }

  :root {
    --primary-grad: linear-gradient(135deg, #6366f1, #8b5cf6);
  }