:root {
  color-scheme: dark;

  /* Change the brand palette here. The whole website updates from these values. */
  --color-navy-950: #07111f;
  --color-navy-900: #0a192f;
  --color-navy-800: #10243b;
  --color-navy-700: #173552;
  --color-gold-500: #c9a84c;
  --color-gold-400: #e7cd82;
  --color-gold-300: #f5e6b4;
  --color-green-700: #0f513b;
  --color-green-600: #146047;
  --color-white: #ffffff;
  --color-ivory: #f7f3e8;
  --color-paper: #f4efe3;
  --color-ink: #102033;
  --color-muted-dark: #b8d7cb;
  --color-muted-light: #466277;

  --bg: #06101d;
  --bg-soft: #06261d;
  --surface: #0a3025;
  --surface-strong: #0e3f31;
  --surface-raised: #124b3a;
  --text: #f4fff9;
  --muted: var(--color-muted-dark);
  --accent: #38c987;
  --accent-bright: #8bf1c2;
  --accent-soft: rgba(56, 201, 135, .18);
  --line: rgba(139, 241, 194, .26);
  --chrome-bg: #06101d;
  --chrome-surface: #0b1a2c;
  --chrome-text: #f7fbff;
  --chrome-muted: #b7c4d3;
  --chrome-line: rgba(255, 255, 255, .14);
  --chrome-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  --shadow: 0 30px 90px rgba(0, 0, 0, .32);
  --radius: 8px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f9fb;
  --bg-soft: #eaf5ff;
  --surface: #ffffff;
  --surface-strong: #f3f8fd;
  --surface-raised: #c9e2fb;
  --text: #0b1f35;
  --muted: var(--color-muted-light);
  --accent: #1f75b8;
  --accent-bright: #0f5f9f;
  --accent-soft: rgba(31, 117, 184, .14);
  --line: rgba(31, 117, 184, .2);
  --chrome-bg: #f7f4ed;
  --chrome-surface: #ffffff;
  --chrome-text: #122033;
  --chrome-muted: #526174;
  --chrome-line: rgba(18, 32, 51, .12);
  --chrome-shadow: 0 12px 34px rgba(18, 32, 51, .1);
  --shadow: 0 24px 70px rgba(31, 117, 184, .14);
}