:root,
:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #f3f5f8;
  --canvas-warm: #fbfbfd;
  --canvas-gradient:
    radial-gradient(circle at 10% -8%, rgba(84, 174, 238, 0.16), transparent 34rem),
    radial-gradient(circle at 92% 2%, rgba(139, 111, 218, 0.14), transparent 32rem),
    linear-gradient(180deg, #ffffff 0%, #f5f7fa 50%, #eef1f6 100%);
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: #ffffff;
  --surface-raised: rgba(255, 255, 255, 0.94);
  --surface-subtle: rgba(245, 247, 251, 0.84);
  --surface-lilac: rgba(247, 244, 255, 0.86);
  --surface-blue: rgba(242, 248, 255, 0.88);
  --surface-mint: rgba(241, 250, 251, 0.84);
  --text: #1b1d21;
  --text-soft: #414751;
  --muted: #6b7079;
  --line: rgba(29, 31, 36, 0.15);
  --line-soft: rgba(29, 31, 36, 0.08);
  --field-bg: rgba(255, 255, 255, 0.88);
  --header-bg: rgba(241, 249, 252, 0.86);
  --header-line: rgba(59, 140, 172, 0.18);
  --mobile-nav-bg: rgba(250, 251, 253, 0.9);
  --navy: #294ca8;
  --navy-deep: #3e338e;
  --sky: #64b5f6;
  --violet: #8068d8;
  --violet-deep: #5e4ab8;
  --amethyst: #6b57c8;
  --amethyst-deep: #523ca8;
  --sapphire: #0071e3;
  --turquoise: #167f91;
  --rose: #965bc9;
  --coral: #6668d9;
  --champagne: #5470ad;
  --error: #b83f58;
  --success: #19756f;
  --shadow:
    0 30px 80px rgba(43, 48, 66, 0.12),
    0 8px 24px rgba(67, 89, 128, 0.07);
  --shadow-soft:
    0 15px 40px rgba(43, 48, 66, 0.08),
    0 3px 12px rgba(67, 89, 128, 0.05);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #090b0f;
  --canvas-warm: #101318;
  --canvas-gradient:
    radial-gradient(circle at 10% -8%, rgba(46, 117, 172, 0.18), transparent 36rem),
    radial-gradient(circle at 92% 2%, rgba(101, 73, 157, 0.18), transparent 34rem),
    linear-gradient(180deg, #090b0f 0%, #0d1015 52%, #080a0d 100%);
  --surface: rgba(24, 28, 35, 0.82);
  --surface-strong: #161a20;
  --surface-raised: rgba(27, 32, 40, 0.94);
  --surface-subtle: rgba(18, 22, 28, 0.84);
  --surface-lilac: rgba(40, 35, 55, 0.84);
  --surface-blue: rgba(27, 39, 51, 0.88);
  --surface-mint: rgba(24, 43, 44, 0.84);
  --text: #f1f3f6;
  --text-soft: #c6cbd3;
  --muted: #969da8;
  --line: rgba(235, 240, 248, 0.16);
  --line-soft: rgba(235, 240, 248, 0.09);
  --field-bg: linear-gradient(145deg, rgba(22, 28, 38, 0.96), rgba(12, 16, 24, 0.92));
  --header-bg: rgba(8, 10, 14, 0.82);
  --header-line: rgba(255, 255, 255, 0.11);
  --mobile-nav-bg: rgba(14, 17, 22, 0.9);
  --navy: #88a6ff;
  --navy-deep: #a296f2;
  --sky: #73c5ff;
  --violet: #a793f0;
  --violet-deep: #8e79df;
  --amethyst: #aa98f4;
  --amethyst-deep: #8e79df;
  --sapphire: #61aaff;
  --turquoise: #64c6d4;
  --rose: #c794ed;
  --coral: #a3a4ff;
  --champagne: #91ace8;
  --error: #ff8297;
  --success: #67d4c7;
  --shadow:
    0 32px 90px rgba(0, 0, 0, 0.38),
    0 8px 24px rgba(0, 0, 0, 0.24);
  --shadow-soft:
    0 18px 46px rgba(0, 0, 0, 0.28),
    0 3px 12px rgba(0, 0, 0, 0.2);
}

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}