:root {
  color-scheme: light;

  --phoenix-bg-1: #f8fbfd;
  --phoenix-bg-2: #eef3f7;
  --phoenix-bg-3: #e9eff3;
  --phoenix-surface: rgba(255, 255, 255, 0.78);
  --phoenix-surface-strong: rgba(255, 255, 255, 0.92);
  --phoenix-surface-soft: rgba(244, 248, 251, 0.58);
  --phoenix-text-title: #344154;
  --phoenix-text-main: #5c6673;
  --phoenix-text-muted: #8795a7;
  --phoenix-text-soft: #a5afbc;
  --phoenix-text-faint: #c2cbd5;
  --phoenix-line: rgba(142, 157, 176, 0.25);
  --phoenix-line-strong: #6c7887;
  --phoenix-blue: #7fa4c9;
  --phoenix-blue-soft: #dbe7f3;
  --phoenix-pink: #e9adc0;
  --phoenix-pink-soft: #f6d6df;
  --phoenix-pink-strong: #ebb8c8;

  --phoenix-radius-panel: 18px;
  --phoenix-radius-card: 16px;
  --phoenix-radius-control: 14px;
  --phoenix-radius-phone: 42px;
  --phoenix-shadow-panel: 0 24px 70px rgba(91, 111, 132, 0.18);
  --phoenix-shadow-soft: 10px 10px 26px rgba(128, 145, 164, 0.14), -10px -10px 26px rgba(255, 255, 255, 0.82);
  --phoenix-shadow-neu: 8px 8px 18px rgba(173, 186, 199, 0.21), -8px -8px 18px rgba(255, 255, 255, 0.94);
  --phoenix-inner-light: rgba(255, 255, 255, 0.72);
  --phoenix-inner-dark: rgba(208, 219, 228, 0.22);
  --phoenix-blur-glass: 22px;

  --phoenix-gradient-page:
    radial-gradient(circle at 22% 14%, rgba(232, 174, 196, 0.26), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(154, 187, 220, 0.28), transparent 30%),
    linear-gradient(135deg, var(--phoenix-bg-1) 0%, var(--phoenix-bg-2) 100%);
  --phoenix-gradient-phone:
    radial-gradient(circle at 15% 16%, rgba(255, 224, 233, 0.52), transparent 24%),
    radial-gradient(circle at 84% 78%, rgba(218, 231, 247, 0.58), transparent 28%),
    linear-gradient(145deg, var(--phoenix-bg-1), var(--phoenix-bg-3));
  --phoenix-gradient-primary: linear-gradient(135deg, #86a9cc, #e2aabd);
}

:root[data-theme="pearl"] {
  --phoenix-bg-1: #fbfdff;
  --phoenix-bg-2: #eef3f7;
  --phoenix-blue: #7fa4c9;
  --phoenix-pink: #e9adc0;
}

:root[data-theme="sakura"] {
  --phoenix-bg-1: #fff9fb;
  --phoenix-bg-2: #f3eef5;
  --phoenix-blue: #8aa7c8;
  --phoenix-pink: #e6a4bd;
}

:root[data-theme="blueglass"] {
  --phoenix-bg-1: #f6fbff;
  --phoenix-bg-2: #eaf3f8;
  --phoenix-blue: #6f9fc8;
  --phoenix-pink: #e6b1c2;
}

:root[data-theme="night"] {
  color-scheme: dark;

  --phoenix-bg-1: #171b24;
  --phoenix-bg-2: #10141d;
  --phoenix-bg-3: #202633;
  --phoenix-surface: rgba(39, 46, 61, 0.76);
  --phoenix-surface-strong: rgba(50, 58, 75, 0.92);
  --phoenix-surface-soft: rgba(28, 34, 47, 0.68);
  --phoenix-text-title: #e8edf6;
  --phoenix-text-main: #c9d2df;
  --phoenix-text-muted: #9da8ba;
  --phoenix-text-soft: #828da0;
  --phoenix-text-faint: #657083;
  --phoenix-line: rgba(183, 197, 218, 0.18);
  --phoenix-line-strong: #8793a7;
  --phoenix-blue: #8bb8df;
  --phoenix-blue-soft: #303f55;
  --phoenix-pink: #e0a3bb;
  --phoenix-pink-soft: #4a3344;
  --phoenix-pink-strong: #e5abc2;
  --phoenix-shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.36);
  --phoenix-shadow-soft: 10px 10px 26px rgba(0, 0, 0, 0.24), -10px -10px 26px rgba(78, 90, 115, 0.12);
  --phoenix-shadow-neu: 8px 8px 18px rgba(0, 0, 0, 0.28), -8px -8px 18px rgba(83, 95, 120, 0.10);
  --phoenix-inner-light: rgba(255, 255, 255, 0.10);
  --phoenix-inner-dark: rgba(0, 0, 0, 0.24);

  --phoenix-gradient-page:
    radial-gradient(circle at 18% 16%, rgba(224, 163, 187, 0.18), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(139, 184, 223, 0.20), transparent 30%),
    linear-gradient(135deg, var(--phoenix-bg-1) 0%, var(--phoenix-bg-2) 100%);
  --phoenix-gradient-phone:
    radial-gradient(circle at 15% 16%, rgba(224, 163, 187, 0.20), transparent 24%),
    radial-gradient(circle at 84% 78%, rgba(139, 184, 223, 0.22), transparent 28%),
    linear-gradient(145deg, var(--phoenix-bg-1), var(--phoenix-bg-3));
  --phoenix-gradient-primary: linear-gradient(135deg, #7caed6, #d993b1);
}