/* Alpha OS — semantic colors shared by authentication and the Boussole. */
:root {
  color-scheme: light;
  --alpha-bg: #F3F6FC;
  --alpha-surface: #FFFFFF;
  --alpha-surface-secondary: #EEF3FB;
  --alpha-surface-hover: #E6EEF9;
  --alpha-text: #12233F;
  --alpha-sub: #526580;
  --alpha-primary: #2458DB;
  --alpha-primary-hover: #1C49BA;
  --alpha-on-primary: #FFFFFF;
  --alpha-hero: #122E65;
  --alpha-hero-end: #234D95;
  --alpha-on-hero: #EDF4FF;
  --alpha-hero-sub: #C4D8FA;
  --alpha-border: #D8E2F2;
  --alpha-field-border: #7386A2;
  --alpha-focus: #2458DB;
  --alpha-illustration: #77CEEA;
  --alpha-progress-track: #D9E4F6;
  --alpha-selected: #E7EEFF;
  --alpha-error: #AC3444;
  --alpha-error-bg: #FFF0F2;
  --alpha-error-border: #CF6572;
  --alpha-warning: #785313;
  --alpha-warning-bg: #FFF5DE;
  --alpha-warning-border: #A67623;
  --alpha-success: #216342;
  --alpha-success-bg: #EAF6F0;
  --alpha-success-border: #668E77;
  --alpha-shadow: 0 20px 64px rgb(18 46 101 / 8%);
  --alpha-surface-shadow: 0 4px 18px rgb(18 46 101 / 4%);

  /* Equivalent names support the same design language across the two renderers. */
  --alpha-muted: var(--alpha-sub);
  --alpha-surface-soft: var(--alpha-surface-secondary);
  --alpha-danger: var(--alpha-error);
  --alpha-danger-soft: var(--alpha-error-bg);
  --alpha-danger-border: var(--alpha-error-border);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --alpha-bg: #0B1220;
  --alpha-surface: #131F33;
  --alpha-surface-secondary: #1A2A43;
  --alpha-surface-hover: #213653;
  --alpha-text: #EDF4FF;
  --alpha-sub: #A9BCD7;
  --alpha-primary: #8DB6FF;
  --alpha-primary-hover: #A7C7FF;
  --alpha-on-primary: #0B1220;
  --alpha-hero: #152B52;
  --alpha-hero-end: #1C407A;
  --alpha-on-hero: #EDF4FF;
  --alpha-hero-sub: #C4D8FA;
  --alpha-border: #30445F;
  --alpha-field-border: #647D9F;
  --alpha-focus: #9FCBFF;
  --alpha-illustration: #7AD9EE;
  --alpha-progress-track: #30445F;
  --alpha-selected: #243C62;
  --alpha-error: #FFAFB6;
  --alpha-error-bg: #3C202A;
  --alpha-error-border: #A45B69;
  --alpha-warning: #F1CD87;
  --alpha-warning-bg: #342A16;
  --alpha-warning-border: #8F713D;
  --alpha-success: #9EE3BE;
  --alpha-success-bg: #15362C;
  --alpha-success-border: #477F66;
  --alpha-shadow: 0 20px 64px rgb(0 0 0 / 22%);
  --alpha-surface-shadow: 0 4px 18px rgb(0 0 0 / 10%);
}

/* System preference also works when JavaScript is unavailable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --alpha-bg: #0B1220;
    --alpha-surface: #131F33;
    --alpha-surface-secondary: #1A2A43;
    --alpha-surface-hover: #213653;
    --alpha-text: #EDF4FF;
    --alpha-sub: #A9BCD7;
    --alpha-primary: #8DB6FF;
    --alpha-primary-hover: #A7C7FF;
    --alpha-on-primary: #0B1220;
    --alpha-hero: #152B52;
    --alpha-hero-end: #1C407A;
    --alpha-on-hero: #EDF4FF;
    --alpha-hero-sub: #C4D8FA;
    --alpha-border: #30445F;
    --alpha-field-border: #647D9F;
    --alpha-focus: #9FCBFF;
    --alpha-illustration: #7AD9EE;
    --alpha-progress-track: #30445F;
    --alpha-selected: #243C62;
    --alpha-error: #FFAFB6;
    --alpha-error-bg: #3C202A;
    --alpha-error-border: #A45B69;
    --alpha-warning: #F1CD87;
    --alpha-warning-bg: #342A16;
    --alpha-warning-border: #8F713D;
    --alpha-success: #9EE3BE;
    --alpha-success-bg: #15362C;
    --alpha-success-border: #477F66;
    --alpha-shadow: 0 20px 64px rgb(0 0 0 / 22%);
    --alpha-surface-shadow: 0 4px 18px rgb(0 0 0 / 10%);
  }
}

html { background: var(--alpha-bg); color: var(--alpha-text); }
html { accent-color: var(--alpha-primary); }
::selection { background: var(--alpha-selected); color: var(--alpha-text); }