:root,
:root[data-ph-theme='dark'] {
  color-scheme: dark;
  --ph-background: #071426;
  --ph-panel: #0d223a;
  --ph-panel-strong: #123a62;
  --ph-panel-soft: #102b48;
  --ph-header: #09192b;
  --ph-floating: rgba(11, 29, 50, 0.96);
  --ph-border: #294965;
  --ph-separator: #294866;
  --ph-text: #f7fbff;
  --ph-muted: #8ea8c8;
  --ph-ice: #bee8ff;
  --ph-on-primary: #ffffff;
  --ph-on-dark: #f7fbff;
  --ph-primary: #2fa8ff;
  --ph-primary-dark: #1175c5;
  --ph-accent: #ff5a62;
  --ph-success: #35d09a;
  --ph-warning: #ffb84d;
  --ph-danger: #ff5a62;
  --ph-black: #020813;
  --ph-shadow: #000000;
  --ph-overlay: rgba(2, 8, 19, 0.85);
  --ph-overlay-strong: rgba(2, 8, 19, 0.93);
  --ph-info-surface: #0c314e;
  --ph-success-surface: #123c2a;
  --ph-warning-surface: #412d0e;
  --ph-danger-surface: #401b25;
  --ph-purple-surface: #171f3d;
  --ph-gold-surface: #2b2518;
  --ph-neutral-surface: #101a28;
  --ph-text-info: #b9dcf5;
  --ph-text-success: #c8f7dc;
  --ph-text-warning: #ffd795;
  --ph-text-danger: #ffb4b8;
  --ph-text-purple: #cebfff;
  --ph-gold: #ffd76a;
  --ph-gold-border: #8d681a;
  --ph-disabled-text: #aab5c3;
}

:root[data-ph-theme='light'] {
  color-scheme: light;
  --ph-background: #f3f7fc;
  --ph-panel: #ffffff;
  --ph-panel-strong: #dceeff;
  --ph-panel-soft: #eaf3fb;
  --ph-header: #ffffff;
  --ph-floating: rgba(255, 255, 255, 0.97);
  --ph-border: #b9cadb;
  --ph-separator: #cfdae5;
  --ph-text: #10243b;
  --ph-muted: #58718c;
  --ph-ice: #225e82;
  --ph-on-primary: #ffffff;
  --ph-on-dark: #f7fbff;
  --ph-primary: #087fcc;
  --ph-primary-dark: #0b6aae;
  --ph-accent: #d63d49;
  --ph-success: #16845e;
  --ph-warning: #a86100;
  --ph-danger: #d63d49;
  --ph-black: #020813;
  --ph-shadow: #15324f;
  --ph-overlay: rgba(14, 30, 48, 0.64);
  --ph-overlay-strong: rgba(14, 30, 48, 0.76);
  --ph-info-surface: #e6f4ff;
  --ph-success-surface: #e5f7ef;
  --ph-warning-surface: #fff3d9;
  --ph-danger-surface: #ffe9ec;
  --ph-purple-surface: #f2edff;
  --ph-gold-surface: #fff6dc;
  --ph-neutral-surface: #eef3f8;
  --ph-text-info: #1e5b82;
  --ph-text-success: #126b4a;
  --ph-text-warning: #84520a;
  --ph-text-danger: #a32332;
  --ph-text-purple: #5b3b96;
  --ph-gold: #a96800;
  --ph-gold-border: #bd8a24;
  --ph-disabled-text: #6f7f90;
}

html,
body {
  background: var(--ph-background);
}

body {
  transition: background-color 160ms ease, color 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}