:root {
  /* Porto-inspired color scheme with KosMix branding */
  --kosmixit-primary: #0088CC;
  --kosmixit-secondary: #0169fe;
  --kosmixit-dark: #004488;
  --kosmixit-accent: #00aaff;
  --kosmixit-light: #f9f9f9;
  
  /* Header specific colors */
  --header-primary: #165C9F;
  --header-dark: #0D2A47; /* Dark contrasting color for #165C9F */
  --header-darker: #081B2E; /* Even darker shade for depth */

  --kosmixit-gradient-primary: linear-gradient(135deg, #0088CC 0%, #0169fe 100%);
  --kosmixit-gradient-secondary: linear-gradient(135deg, #00aaff 0%, #0088CC 100%);

  /* Fallback bridge */
  --brand-primary: var(--kosmixit-primary, #0088CC);
  --brand-secondary: var(--kosmixit-secondary, #0169fe);
  --brand-dark: var(--kosmixit-dark, #004488);
  --brand-accent: var(--kosmixit-accent, #00aaff);
  --brand-light: var(--kosmixit-light, #f9f9f9);
  --gradient-primary: var(--kosmixit-gradient-primary);
  --gradient-secondary: var(--kosmixit-gradient-secondary);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-bg: #121212;
    --brand-surface: #1e1e1e;
  }
}