:root {
  /* Primary Colors */
  --color-muted-teal: #7A9A9E;
  --color-deep-aqua: #5D8A8F;
  --color-soft-teal: #9FB8BC;
  --color-pale-aqua: #C8D8DA;
  --color-ice-white: #E8F0F2;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-off-white: #F5F8F9;
  --color-light-gray: #B8C4C6;
  --color-medium-gray: #6B7C7E;
  --color-dark-gray: #3A4647;
  --color-near-black: #1E2728;

  /* Platform Accents */
  --color-aeromist: #A8C8D4;
  --color-aerosilk: #D4B896;
  --color-aerobiota: #C49AAE;
  --color-aerorx: #C8A0A0;

  /* Functional */
  --color-link: #5D8A8F;
  --color-link-hover: #4A7478;
  --color-success: #6B9E7A;
  --color-error: #9E6B6B;

  /* Typography */
  --font-headline: 'Tiempos Headline', Georgia, serif;
  --font-body: 'DIN Next LT Pro', Arial, sans-serif;
  --font-condensed-medium: 'DIN Next LT Pro Medium Condensed', Arial Narrow, sans-serif;
  --font-condensed-light: 'DIN Next LT Pro Light Condensed', Arial Narrow, sans-serif;

  /* Spacing (8px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Layout */
  --max-width: 1200px;
  --gutter: 24px;
  --border-radius: 4px;
  --border-radius-card: 8px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(30, 39, 40, 0.08);
  --shadow-header: 0 1px 4px rgba(30, 39, 40, 0.1);
}

/* ========================================
   Dark Theme
   ======================================== */

[data-theme="dark"] {
  /* Primary Colors — teal accents stay recognizable, slightly brightened for dark bg */
  --color-muted-teal: #8AACB0;
  --color-deep-aqua: #6D9CA1;
  --color-soft-teal: #7A9EA3;
  --color-pale-aqua: #2E4244;
  --color-ice-white: #1A2C2E;

  /* Neutrals — inverted, teal-tinted */
  --color-white: #161F20;
  --color-off-white: #1A2526;
  --color-light-gray: #4A5C5E;
  --color-medium-gray: #8A9C9E;
  --color-dark-gray: #C0CCCE;
  --color-near-black: #E4ECED;

  /* Platform Accents — muted for dark backgrounds */
  --color-aeromist: #3A5A66;
  --color-aerosilk: #5A4A34;
  --color-aerobiota: #4E3344;
  --color-aerorx: #4E3838;

  /* Functional */
  --color-link: #7AACB2;
  --color-link-hover: #96C4CA;
  --color-success: #7AB88C;
  --color-error: #B87A7A;

  /* Shadows — stronger for dark context */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-header: 0 1px 4px rgba(0, 0, 0, 0.3);
}