/* Light theme - default */
:root,
:root[data-theme=light] {
  --color-status-success-rgb: var(--color-green-500-rgb);
  --color-background-primary-rgb: var(--color-white-rgb);
  --color-background-highlight-rgb: var(--color-neutral-050-rgb);
  --color-background-secondary-rgb: var(--color-neutral-100-rgb);
  --color-background-contrast-rgb: var(--color-neutral-200-rgb);
  --color-background-translucent: hsla(220, 9%, 94%, .7);
  --color-overlay: var(--color-shade-300);
  --color-picture-overlay: var(--color-shade-800);
  --color-picture-interface: var(--color-shade-400);
  --color-picture-dimm: var(--color-shade-050);
  --color-emphasise: var(--color-shade-100);
  
  /* Content colors */
  --color-content-lead-rgb: var(--color-neutral-700-rgb);
  --color-content-lead-hover-rgb: var(--color-black-rgb);
  --color-content-lead-active-rgb: var(--color-black-rgb);
  --color-content-secondary-rgb: var(--color-neutral-500-rgb);
  --color-content-secondary-hover-rgb: var(--color-neutral-600-rgb);
  --color-content-secondary-active-rgb: var(--color-neutral-600-rgb);
  --color-content-silent-rgb: var(--color-neutral-300-rgb);
  --color-content-silent-hover-rgb: var(--color-neutral-600-rgb);
  --color-content-silent-active-rgb: var(--color-neutral-600-rgb);
  
  /* Action colors */
  --color-action-rgb: var(--color-orange-500-rgb);
  --color-background-action-rgb: var(--color-orange-100-rgb);
  --color-content-action-rgb: var(--color-orange-600-rgb);
  --color-content-action-hover-rgb: var(--color-orange-700-rgb);
  --color-content-action-active-rgb: var(--color-orange-800-rgb);
  
  /* Accent colors */
  --color-accent-rgb: var(--color-petrol-500-rgb);
  --color-background-accent-rgb: var(--color-petrol-100-rgb);
  --color-content-accent-rgb: var(--color-petrol-700-rgb);
  --color-content-accent-hover-rgb: var(--color-petrol-800-rgb);
  --color-content-accent-active-rgb: var(--color-petrol-900-rgb);
  
  /* Status colors */
  --color-success-rgb: var(--color-green-500-rgb);
  --color-background-success-rgb: var(--color-green-100-rgb);
  --color-content-success-rgb: var(--color-green-700-rgb);
  --color-content-success-hover-rgb: var(--color-green-800-rgb);
  --color-content-success-active-rgb: var(--color-green-900-rgb);
  
  /* Warning colors */
  --color-warning-rgb: var(--color-yellow-400-rgb);
  --color-background-warning-rgb: var(--color-yellow-100-rgb);
  --color-content-warning-rgb: var(--color-yellow-800-rgb);
  --color-content-warning-hover-rgb: var(--color-yellow-900-rgb);
  --color-content-warning-active-rgb: var(--color-yellow-900-rgb);
  
  /* Error colors */
  --color-error-rgb: var(--color-red-500-rgb);
  --color-background-error-rgb: var(--color-red-100-rgb);
  --color-content-error-rgb: var(--color-red-600-rgb);
  --color-content-error-hover-rgb: var(--color-red-700-rgb);
  --color-content-error-active-rgb: var(--color-red-800-rgb);
  
  /* Focus colors */
  --color-focus-border-rgb: var(--color-petrol-700-rgb);
  --color-focus-fill-rgb: var(--color-petrol-300-rgb);
  
  /* Environmental bonus colors */
  --color-environmental-bonus-background: rgba(var(--color-environmental-bonus-background-rgb), 0.5);
  --color-environmental-bonus-stroke: rgba(var(--color-environmental-bonus-stroke-rgb), 0.95);
  --color-environmental-bonus-content: #406921;
  
  /* On-colors */
  --color-on-action: rgb(var(--color-white-rgb));
  --color-on-action-rgb: var(--color-white-rgb);
  --color-on-accent: rgb(var(--color-white-rgb));
  --color-on-success: rgb(var(--color-white-rgb));
  --color-on-warning: rgb(var(--color-black-rgb));
  --color-on-error: rgb(var(--color-white-rgb));
  --color-on-content: rgb(var(--color-white-rgb));
  
  /* KA colors */
  --color-KA-logo-button-rgb: var(--color-KA-green-800-rgb);
  --color-KA-content-lead-rgb: var(--color-KA-neutral-800-rgb);
  --color-KA-background-primary-rgb: var(--color-white-rgb);
  --color-KA-background-header-rgb: var(--color-KA-neutral-200-rgb);
  
  color-scheme: light;
}

/* Dark theme */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-status-success-rgb: var(--color-green-700-rgb);
    --color-background-primary-rgb: var(--color-neutral-700-rgb);
    --color-background-highlight-rgb: var(--color-neutral-800-rgb);
    --color-background-secondary-rgb: var(--color-neutral-900-rgb);
    --color-background-contrast-rgb: var(--color-neutral-600-rgb);
    --color-background-translucent: rgba(16, 17, 20, .7);
    --color-overlay: var(--color-shade-500);
    --color-picture-overlay: var(--color-shade-800);
    --color-picture-interface: var(--color-shade-400);
    --color-picture-dimm: transparent;
    --color-emphasise: var(--color-shine-200);
    
    /* Dark theme colors */
    --color-content-lead-rgb: var(--color-neutral-100-rgb);
    --color-content-lead-hover-rgb: var(--color-white-rgb);
    --color-content-lead-active-rgb: var(--color-white-rgb);
    --color-content-secondary-rgb: var(--color-neutral-400-rgb);
    --color-content-secondary-hover-rgb: var(--color-neutral-300-rgb);
    --color-content-secondary-active-rgb: var(--color-neutral-300-rgb);
    --color-content-silent-rgb: var(--color-neutral-500-rgb);
    --color-content-silent-hover-rgb: var(--color-neutral-400-rgb);
    --color-content-silent-active-rgb: var(--color-neutral-400-rgb);
    
    /* Dark theme action colors */
    --color-action-rgb: var(--color-orange-600-rgb);
    --color-background-action-rgb: var(--color-orange-900-rgb);
    --color-content-action-rgb: var(--color-orange-500-rgb);
    --color-content-action-hover-rgb: var(--color-orange-400-rgb);
    --color-content-action-active-rgb: var(--color-orange-300-rgb);
    
    /* Dark theme accent colors */
    --color-accent-rgb: var(--color-petrol-600-rgb);
    --color-background-accent-rgb: var(--color-petrol-900-rgb);
    --color-content-accent-rgb: var(--color-petrol-300-rgb);
    --color-content-accent-hover-rgb: var(--color-petrol-200-rgb);
    --color-content-accent-active-rgb: var(--color-petrol-100-rgb);
    
    /* Dark theme environmental bonus colors */
    --color-environmental-bonus-background: rgba(var(--color-environmental-bonus-background-rgb), 0.2);
    --color-environmental-bonus-stroke: rgba(var(--color-environmental-bonus-stroke-rgb), 0.3);
    --color-environmental-bonus-content: rgba(var(--color-environmental-bonus-background-rgb), 0.8);
    
    /* Dark theme KA colors */
    --color-KA-logo-button-rgb: var(--color-KA-green-400-rgb);
    --color-KA-content-lead-rgb: var(--color-KA-neutral-200-rgb);
    --color-KA-background-primary-rgb: var(--color-KA-neutral-800-rgb);
    --color-KA-background-header-rgb: var(--color-KA-neutral-700-rgb);
    
    color-scheme: dark;
  }
}

/* Brand V1 specific colors */
:root[data-bv="1"],
:root[data-bv="1"][data-theme=light] {
  /* Brand V1 neutral colors */
  --color-neutral-1100-rgb: 16, 16, 20;
  --color-neutral-1000-rgb: 20, 20, 26;
  --color-neutral-900-rgb: 27, 27, 33;
  --color-neutral-800-rgb: 42, 43, 51;
  --color-neutral-700-rgb: 66, 69, 79;
  --color-neutral-600-rgb: 93, 97, 107;
  --color-neutral-500-rgb: 126, 131, 143;
  --color-neutral-400-rgb: 158, 164, 173;
  --color-neutral-300-rgb: 185, 191, 199;
  --color-neutral-200-rgb: 213, 218, 224;
  --color-neutral-100-rgb: 230, 234, 240;
  --color-neutral-050-rgb: 245, 247, 250;
  
  /* Brand V1 mOrange colors */
  --color-mOrange-1100-rgb: 31, 1, 0;
  --color-mOrange-1000-rgb: 56, 4, 0;
  --color-mOrange-900-rgb: 89, 9, 0;
  --color-mOrange-800-rgb: 128, 21, 0;
  --color-mOrange-700-rgb: 173, 35, 0;
  --color-mOrange-600-rgb: 219, 48, 0;
  --color-mOrange-500-rgb: 250, 60, 0;
  --color-mOrange-400-rgb: 255, 108, 59;
  --color-mOrange-300-rgb: 255, 143, 102;
  --color-mOrange-200-rgb: 255, 178, 145;
  --color-mOrange-100-rgb: 255, 212, 191;
  --color-mOrange-050-rgb: 255, 238, 229;
  
  /* Brand V1 mOrange neutral colors */
  --color-mOrange-neutral-1100-rgb: 20, 11, 11;
  --color-mOrange-neutral-1000-rgb: 28, 19, 18;
  --color-mOrange-neutral-900-rgb: 43, 31, 29;
  --color-mOrange-neutral-800-rgb: 71, 52, 49;
  --color-mOrange-neutral-700-rgb: 102, 78, 71;
  --color-mOrange-neutral-600-rgb: 138, 101, 91;
  --color-mOrange-neutral-500-rgb: 161, 127, 117;
  --color-mOrange-neutral-400-rgb: 176, 150, 141;
  --color-mOrange-neutral-300-rgb: 196, 177, 171;
  --color-mOrange-neutral-200-rgb: 213, 201, 196;
  --color-mOrange-neutral-100-rgb: 230, 222, 218;
  --color-mOrange-neutral-050-rgb: 245, 241, 240;
}
