@use 'sass:color';

// Light values stay beside each existing declaration as fallbacks. These shared
// semantic overrides also reach CDK overlays mounted outside routed components.
:root[data-theme='dark'] {
  color-scheme: dark;
  @each $role, $value in (
    canvas: #0b1220,
    surface: #111c2e,
    surface-soft: #172337,
    surface-raised: #1e2c42,
    text-strong: #f1f5f9,
    text-control: #dbe4f0,
    text-secondary: #bdcadd,
    text-muted: #98aac1,
    text-faint: #8da1bb,
    border: #2b3b52,
    border-control: #3d506a,
    highlight: #24344d,
    primary-text: #8ebcff,
    primary-soft: #152e50,
    primary-border: #375b83,
    exploration-text: #b7b3ff,
    exploration-soft: #29264b,
    exploration-border: #514a83,
    success-text: #6ee7b7,
    success-soft: #103b32,
    success-border: #24634d,
    warning-text: #fcd089,
    warning-soft: #3b2b16,
    warning-border: #775728,
    error-text: #ff9ca7,
    error-soft: #421f2b,
    error-border: #7d3d4e,
    info-text: #83d8f5,
    info-soft: #153747,
    info-border: #316479
  ) {
    --app-#{$role}: #{$value};
    --app-#{$role}-rgb: #{color.channel($value, 'red', $space: rgb)} #{color.channel($value, 'green', $space: rgb)} #{color.channel($value, 'blue', $space: rgb)};
  }
}

:root {
  color-scheme: light;
  background: var(--app-canvas, #f8f9fa);
}

body {
  background: var(--app-canvas, #f8f9fa);
}

input, textarea, select {
  color: inherit;
}

::selection {
  background: var(--app-primary-border, #bfdbfe);
}