:root,
[data-theme="dark"] {
  --bg: #07080c;
  --bg-elevated: #10131b;
  --bg-card: #12151e;
  --line: #1f2430;
  --line-soft: #171b26;
  --text-1: #eef0f5;
  --text-2: #8891a6;
  --text-3: #5b6273;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --scrim: rgba(7, 8, 12, 0.72);
}

[data-theme="light"] {
  --bg: #f3f4f8;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --line: #dde1ea;
  --line-soft: #e7e9f0;
  --text-1: #12131a;
  --text-2: #4b5163;
  --text-3: #8890a0;
  --shadow: 0 24px 60px -24px rgba(20, 24, 40, 0.25);
  --scrim: rgba(243, 244, 248, 0.72);
}

:root,
[data-palette="cyan-violet"] {
  --c1: #00dcff;
  --c2: #a855f7;
}

[data-palette="burgundy"] {
  --c1: #b3123f;
  --c2: #ff7a9c;
}

[data-palette="forest"] {
  --c1: #0f8a5f;
  --c2: #a3e635;
}

[data-palette="crimson"] {
  --c1: #c1121c;
  --c2: #fb8500;
}

[data-palette="sunset"] {
  --c1: #f97316;
  --c2: #ec4899;
}

[data-palette="ocean"] {
  --c1: #0ea5e9;
  --c2: #14b8a6;
}

:root {
  --grad: linear-gradient(135deg, var(--c1), var(--c2));
  --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--c1) 16%, transparent), color-mix(in srgb, var(--c2) 16%, transparent));
  --wip: #626a7d;
  --wip-line: #2a2f3c;
  --sandbox-a: #ff2fb0;
  --sandbox-b: #baff29;
  --sandbox-grad: linear-gradient(135deg, var(--sandbox-a), var(--sandbox-b));

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", monospace;

  --radius-l: 22px;
  --radius-m: 14px;
  --radius-s: 8px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] [data-palette="cyan-violet"],
[data-theme="light"].palette-cyan-violet {
  --c1: #0091ac;
  --c2: #8b2fe0;
}