/* Theme tokens from Refero / awesome-design-md (Stripe / Linear / Notion / ElevenLabs / Vercel) */

:root,
html[data-theme="stripe"] {
  --primary: #533afd;
  --primary-deep: #4434d4;
  --primary-soft: #665efd;
  --ink: #0d253d;
  --ink-2: #273951;
  --muted: #64748d;
  --canvas: #ffffff;
  --canvas-soft: #f6f9fc;
  --hairline: #e3e8ee;
  --accent: #ea2261;
  --signal: #9b6829;
  --panel: rgba(255, 255, 255, 0.86);
  --shadow: 0 24px 60px rgba(0, 55, 112, 0.12);
  --radius: 12px;
  --radius-pill: 999px;
  --font-sans: "IBM Plex Sans JP", "DM Sans", "Hiragino Sans", sans-serif;
  --font-display: "DM Sans", "IBM Plex Sans JP", sans-serif;
  --mesh-1: rgba(83, 58, 253, 0.18);
  --mesh-2: rgba(249, 107, 238, 0.12);
  --mesh-3: #f6f9fc;
  --card-bg: #ffffff;
  --chip-bg: #eef2ff;
  --chip-fg: #4434d4;
}

html[data-theme="linear"] {
  --primary: #5e6ad2;
  --primary-deep: #4c57c2;
  --primary-soft: #8b93e8;
  --ink: #f7f8f8;
  --ink-2: #d0d6e0;
  --muted: #8a8f98;
  --canvas: #0f1014;
  --canvas-soft: #16181d;
  --hairline: #2a2e37;
  --accent: #68cc58;
  --signal: #f2c94c;
  --panel: rgba(22, 24, 29, 0.92);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --radius: 10px;
  --radius-pill: 999px;
  --font-sans: "IBM Plex Sans JP", Inter, system-ui, sans-serif;
  --font-display: Inter, "IBM Plex Sans JP", sans-serif;
  --mesh-1: rgba(94, 106, 210, 0.25);
  --mesh-2: rgba(104, 204, 88, 0.08);
  --mesh-3: #0f1014;
  --card-bg: #16181d;
  --chip-bg: #22262f;
  --chip-fg: #c8cdf8;
}

html[data-theme="notion"] {
  --primary: #2383e2;
  --primary-deep: #0b6bcb;
  --primary-soft: #69b1ef;
  --ink: #37352f;
  --ink-2: #5a574f;
  --muted: #787774;
  --canvas: #ffffff;
  --canvas-soft: #f7f6f3;
  --hairline: #e9e9e7;
  --accent: #d9730d;
  --signal: #0f7b6c;
  --panel: rgba(255, 255, 255, 0.95);
  --shadow: 0 12px 32px rgba(55, 53, 47, 0.08);
  --radius: 8px;
  --radius-pill: 6px;
  --font-sans: "IBM Plex Sans JP", ui-sans-serif, system-ui, sans-serif;
  --font-display: ui-sans-serif, "IBM Plex Sans JP", sans-serif;
  --mesh-1: rgba(35, 131, 226, 0.08);
  --mesh-2: rgba(217, 115, 13, 0.06);
  --mesh-3: #f7f6f3;
  --card-bg: #ffffff;
  --chip-bg: #e7f3ff;
  --chip-fg: #0b6bcb;
}

html[data-theme="elevenlabs"] {
  --primary: #000000;
  --primary-deep: #111111;
  --primary-soft: #333333;
  --ink: #0a0a0a;
  --ink-2: #2a2a2a;
  --muted: #6b6b6b;
  --canvas: #fafafa;
  --canvas-soft: #f0f0f0;
  --hairline: #e5e5e5;
  --accent: #ff4d00;
  --signal: #ff4d00;
  --panel: rgba(255, 255, 255, 0.92);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  --radius: 16px;
  --radius-pill: 999px;
  --font-sans: "IBM Plex Sans JP", "DM Sans", sans-serif;
  --font-display: "DM Sans", "IBM Plex Sans JP", sans-serif;
  --mesh-1: rgba(255, 77, 0, 0.12);
  --mesh-2: rgba(0, 0, 0, 0.04);
  --mesh-3: #fafafa;
  --card-bg: #ffffff;
  --chip-bg: #ffe8de;
  --chip-fg: #b33600;
}

html[data-theme="vercel"] {
  --primary: #0070f3;
  --primary-deep: #0761d1;
  --primary-soft: #3291ff;
  --ink: #000000;
  --ink-2: #171717;
  --muted: #666666;
  --canvas: #ffffff;
  --canvas-soft: #fafafa;
  --hairline: #eaeaea;
  --accent: #0070f3;
  --signal: #0070f3;
  --panel: rgba(255, 255, 255, 0.9);
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  --radius: 8px;
  --radius-pill: 999px;
  --font-sans: "IBM Plex Sans JP", Inter, system-ui, sans-serif;
  --font-display: Inter, "IBM Plex Sans JP", sans-serif;
  --mesh-1: rgba(0, 112, 243, 0.1);
  --mesh-2: rgba(0, 0, 0, 0.03);
  --mesh-3: #fafafa;
  --card-bg: #ffffff;
  --chip-bg: #e8f3ff;
  --chip-fg: #0761d1;
}