:root {
  /* Brand Palette - Dark Mode (Primary) */
  --brand-dark-bg-primary: #0E1418;
  --brand-dark-bg-secondary: #1A2228;
  --brand-dark-accent-primary: #99D5E8;
  --brand-dark-accent-secondary: #84BBD3;
  --brand-dark-accent-muted: #57859F;
  --brand-dark-text-primary: #FFFFFF;
  --brand-dark-text-secondary: #C7D3DA;

  /* Brand Palette - Light Mode (Secondary) */
  --brand-light-bg-primary: #FFFFFF;
  --brand-light-bg-secondary: #F4F7F9;
  --brand-light-accent-primary: #2C8BB9; /* Adjusted to match dark mode cyan tone */
  --brand-light-accent-secondary: #84BBD3;
  --brand-light-accent-muted: #57859F;
  --brand-light-text-primary: #0E1418;
  --brand-light-text-secondary: #4A5A66;

  /* Semantic Variables - Default (Dark Mode) */
  --background: var(--brand-dark-bg-primary);
  --background-secondary: var(--brand-dark-bg-secondary);
  --background-tertiary: var(--brand-dark-bg-secondary);
  
  --text-primary: var(--brand-dark-text-primary);
  --text-secondary: var(--brand-dark-text-secondary);
  --text-tertiary: var(--brand-dark-accent-muted);
  
  --accent: var(--brand-dark-accent-primary);
  --accent-hover: var(--brand-dark-accent-secondary);
  --accent-muted: var(--brand-dark-accent-muted);
  
  /* Shadows and borders */
  --shadow-light: rgba(14, 20, 24, 0.7);
  --shadow-medium: rgba(14, 20, 24, 0.9);
  --border-color: var(--brand-dark-accent-muted);
  
  /* Font Families */
  --font-heading: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Light theme variables */
[data-theme="light"] {
  /* Semantic Variables - Light Mode */
  --background: var(--brand-light-bg-primary);
  --background-secondary: var(--brand-light-bg-secondary);
  --background-tertiary: var(--brand-light-bg-secondary);
  
  --text-primary: var(--brand-light-text-primary);
  --text-secondary: var(--brand-light-text-secondary);
  --text-tertiary: var(--brand-light-text-secondary);
  
  --accent: var(--brand-light-accent-primary);
  --accent-hover: var(--brand-light-accent-secondary);
  --accent-muted: var(--brand-light-accent-muted);
  
  /* Shadows and borders */
  --shadow-light: rgba(14, 20, 24, 0.1);
  --shadow-medium: rgba(14, 20, 24, 0.15);
  --border-color: #E1E8ED;
}