:root {
  color-scheme: light;
  --font: "Segoe UI", Arial, sans-serif;
  --navy: #09254d;
  --bg: #fff;
  --surface: #fff;
  --header: #ffffffed;
  --text: #10264e;
  --muted: #5e6e88;
  --accent: #0d6683;
  --link: #066ad7;
  --primary: #0a385e;
  --primary-text: #fff;
  --gold: #ffc633;
  --coral: #f33076;
  --teal: #008b87;
  --utility: #0a3558;
  --line: #e1e8f0;
  --line-strong: #c8d5e4;
  --wash: #edf6fa;
  --input: #fff;
  --active: #eaf4fb;
  --hero-bg: #fdf6ec;
  --hero-note: #fff0ac;
  --search-button: #09254d;
  --search-button-text: #fff;
  --search-border: #efc6ba;
  --free-bg: #ebf8ff;
  --free-line: #d8edf7;
  --bundle-bg: #fcebf0;
  --library-bg: #f1f6fc;
  --gallery-bg: #f0f5f7;
  --catalog-bg: #eaf5fd;
  --welcome-bg: #eaf5f9;
  --support-bg: #fff4e6;
  --newsletter-bg: #0b3456;
  --newsletter-line: #0b3456;
  --footer: #071e34;
  --focus: #147deb;
  --focus-soft: #1681ed25;
  --danger: #ba2350;
  --skeleton: #e1e8ef;
  --radius-sm: 7px;
  --radius: 10px;
  --shadow-sm: 0 3px 12px #18385512;
  --shadow: 0 9px 26px #102b5617;
  --duration: 180ms;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #071a2d;
  --surface: #0c2339;
  --header: #0a2036f0;
  --text: #f1f6ff;
  --muted: #acc0d7;
  --accent: #76d5f7;
  --link: #55b7ff;
  --primary: #1896ee;
  --primary-text: #041c31;
  --teal: #10a39d;
  --utility: #061a2c;
  --line: #233c54;
  --line-strong: #39566f;
  --wash: #12334b;
  --input: #0a2035;
  --active: #14364e;
  --hero-bg: #071c31;
  --search-button: #1399f5;
  --search-button-text: #fff;
  --search-border: #355872;
  --free-bg: #0a243b;
  --free-line: #27445c;
  --bundle-bg: #273047;
  --library-bg: #0d2a40;
  --gallery-bg: #112d42;
  --catalog-bg: #102e45;
  --welcome-bg: #10364b;
  --support-bg: #143349;
  --newsletter-bg: #082c48;
  --newsletter-line: #2288b8;
  --footer: #051727;
  --focus: #74d6ff;
  --focus-soft: #74d6ff30;
  --danger: #ff93b0;
  --skeleton: #23415a;
  --shadow-sm: 0 3px 12px #020a1740;
  --shadow: 0 9px 26px #010b1950;
}