:root {
  --app-yale-blue: #033f63;
  --app-stormy-teal: #28666e;
  --app-muted-teal: #7c9885;
  --app-dry-sage: #b5b682;
  --app-soft-peach: #fedc97;
}

:root,
:root[data-theme="ocean"] {
  --color-bg: #f7fbff;
  --color-surface: #ffffff;
  --color-surface-alt: #edf5fb;
  --color-text: #102a43;
  --color-text-dim: #486581;
  --color-accent: #28666e;
  --color-accent-light: #7c9885;
  --color-accent-strong: #033f63;
  --color-warm: #fedc97;
  --color-bg-rgb: 247, 251, 255;
  --color-surface-rgb: 255, 255, 255;
  --color-accent-rgb: 40, 102, 110;
  --color-accent-light-rgb: 124, 152, 133;
  --color-accent-strong-rgb: 3, 63, 99;
  --color-warm-rgb: 254, 220, 151;
  --color-device-shell-start: #0e4f76;
  --color-device-shell-end: #2f7b87;
  --color-device-screen: #f4f9fc;
}

:root[data-theme="teal"] {
  --color-bg: #f3f9f8;
  --color-surface: #ffffff;
  --color-surface-alt: #e8f2f0;
  --color-text: #143444;
  --color-text-dim: #4f6f76;
  --color-accent: #033f63;
  --color-accent-light: #28666e;
  --color-accent-strong: #102a43;
  --color-warm: #fedc97;
  --color-bg-rgb: 243, 249, 248;
  --color-surface-rgb: 255, 255, 255;
  --color-accent-rgb: 3, 63, 99;
  --color-accent-light-rgb: 40, 102, 110;
  --color-accent-strong-rgb: 16, 42, 67;
  --color-warm-rgb: 254, 220, 151;
  --color-device-shell-start: #0f476a;
  --color-device-shell-end: #2c6872;
  --color-device-screen: #f3f8fa;
}

:root[data-theme="sage"] {
  --color-bg: #fafaf5;
  --color-surface: #ffffff;
  --color-surface-alt: #f2f5ea;
  --color-text: #24353e;
  --color-text-dim: #5d6e66;
  --color-accent: #7c9885;
  --color-accent-light: #b5b682;
  --color-accent-strong: #28666e;
  --color-warm: #fedc97;
  --color-bg-rgb: 250, 250, 245;
  --color-surface-rgb: 255, 255, 255;
  --color-accent-rgb: 124, 152, 133;
  --color-accent-light-rgb: 181, 182, 130;
  --color-accent-strong-rgb: 40, 102, 110;
  --color-warm-rgb: 254, 220, 151;
  --color-device-shell-start: #2d6a6f;
  --color-device-shell-end: #6f8f7d;
  --color-device-screen: #f7faf2;
}