:root,
html[data-theme="light"] {
  color-scheme: light;
  --color-page: #f7f9fc;
  --color-surface: #ffffff;
  --color-surface-subtle: #f1f5fb;
  --color-surface-raised: #ffffff;
  --color-text: #0e1726;
  --color-text-secondary: #43526f;
  --color-border: #c8d1e1;
  --color-primary: #086b85;
  --color-primary-hover: #05495c;
  --color-primary-active: #043d4d;
  --color-on-primary: #ffffff;
  --color-secondary: #e9eef8;
  --color-secondary-hover: #e3f4f8;
  --color-secondary-active: #c8ecf3;
  --color-on-secondary: #253045;
  --color-focus: #0a93b0;
  --color-success: #2f8f63;
  --color-warning: #b26a00;
  --color-danger: #c93636;
  --color-danger-hover: #a72d2d;
  --color-danger-active: #8d2525;
  --color-on-danger: #ffffff;
  --color-disabled: #94a3b8;
  --color-selection: #c8ecf3;
  --color-loading: #0a93b0;
  --color-overlay: rgba(7, 18, 24, 0.58);
  --shadow-surface: 0 8px 24px rgba(14, 23, 38, 0.08);

  /* Shared chart palette. Applications may add series, but axes and text
     should resolve through these semantic values. */
  --color-chart-text: #172033;
  --color-chart-text-secondary: #43526f;
  --color-chart-muted: #526477;
  --color-chart-axis: #94a3b8;
  --color-chart-grid: #d5dde6;
  --color-chart-primary: #1f69df;
  --color-chart-secondary: #7dbbf2;

  /* Invariant topbar identity: these intentionally do not change in dark
     mode, matching the logo and light notification controls. */
  --color-topbar-control-border: #e7ecf6;
  --color-topbar-control-bg: #f1f5fb;
  --color-topbar-control-text: #253045;
  --color-topbar-control-hover-border: #a6e0eb;
  --color-topbar-control-hover-bg: #e3f4f8;
  --color-topbar-control-hover-text: #172033;
  --color-topbar-control-active-border: #6fd2e3;
  --color-topbar-control-active-bg: #c8ecf3;
  --color-topbar-control-active-text: #086b85;
  --color-topbar-logo-bg: #e7ecf6;
  --color-topbar-avatar-bg: #ffffff;
  --color-notification-success: #16a34a;
  --color-notification-danger: #ed4245;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #15191d;
  --color-surface: #20252a;
  --color-surface-subtle: #292f35;
  --color-surface-raised: #30363c;
  --color-text: #f4f6f8;
  --color-text-secondary: #b7c0ca;
  --color-border: #46515c;
  --color-primary: #32b9d6;
  --color-primary-hover: #6fd2e3;
  --color-primary-active: #a6e0eb;
  --color-on-primary: #071a20;
  --color-secondary: #364049;
  --color-secondary-hover: #46515c;
  --color-secondary-active: #586675;
  --color-on-secondary: #f4f6f8;
  --color-focus: #6fd2e3;
  --color-success: #55c58e;
  --color-warning: #f0b84b;
  --color-danger: #ff7373;
  --color-danger-hover: #ff9292;
  --color-danger-active: #ffadad;
  --color-on-danger: #071a20;
  --color-disabled: #768593;
  --color-selection: #164e63;
  --color-loading: #6fd2e3;
  --color-overlay: rgba(0, 0, 0, 0.7);
  --shadow-surface: 0 8px 24px rgba(0, 0, 0, 0.36);
  --color-chart-text: #eef1f4;
  --color-chart-text-secondary: #d0d4da;
  --color-chart-muted: #b8bdc5;
  --color-chart-axis: #666b72;
  --color-chart-grid: #3f444a;
  --color-chart-primary: #4b8cf5;
  --color-chart-secondary: #79b8f3;

  /* Compatibility bridge while application CSS migrates to semantic tokens. */
  --bg-0: var(--color-surface);
  --bg-50: var(--color-page);
  --bg-100: var(--color-surface-subtle);
  --bg-200: var(--color-surface-raised);
  --ink-900: var(--color-text);
  --ink-800: #e3e8ed;
  --ink-700: #d2d9e0;
  --ink-600: #c1cad3;
  --ink-500: var(--color-text-secondary);
  --ink-400: #98a5b2;
  --ink-300: #768593;
  --ink-200: var(--color-border);
  --ink-100: #364049;
  --shadow: var(--shadow-surface);
}

body {
  background: var(--color-page);
  color: var(--color-text);
}

/* Les pastilles de la topbar font partie de l'identité fixe de navigation :
   elles restent claires, indépendamment du thème de contenu. */
.topbar .icon-btn,
.topbar .avatar-btn {
  border-color: var(--color-topbar-control-border);
  background: var(--color-topbar-control-bg);
  color: var(--color-topbar-control-text);
}

.topbar .icon-btn:hover,
.topbar .avatar-btn:hover {
  border-color: var(--color-topbar-control-hover-border);
  background: var(--color-topbar-control-hover-bg);
  color: var(--color-topbar-control-hover-text);
}

.topbar-actions .avatar {
  border-color: var(--color-topbar-control-border);
  background: var(--color-topbar-avatar-bg);
  color: var(--color-topbar-control-text);
}

.theme-switch {
  display: inline-flex;
  margin: 0 var(--space-2) 0 0;
}

.theme-switch__button {
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.theme-switch__track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 3.5rem;
  height: 2rem;
  padding: 0 0.38rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

.theme-switch__track svg {
  z-index: 1;
  width: 0.85rem;
  height: 0.85rem;
}

.theme-switch__moon { justify-self: end; }

.theme-switch__thumb {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.48rem;
  height: 1.48rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
  transition: transform var(--motion-fast);
}

.theme-switch__button[aria-checked="true"] .theme-switch__thumb {
  transform: translateX(1.46rem);
}

.theme-switch__button:disabled { cursor: wait; opacity: 0.7; }

.theme-transition-modal {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--color-overlay);
  backdrop-filter: blur(3px);
}

.theme-transition-modal[hidden] { display: none; }

.theme-transition-modal__panel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: min(22rem, calc(100vw - 3rem));
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
  font-weight: 700;
}

.theme-transition-modal__panel.is-error {
  border-color: var(--color-danger);
}

.theme-transition-modal__panel.is-error .theme-transition-modal__spinner {
  display: none;
}

.theme-transition-modal__spinner {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: theme-transition-spin 0.75s linear infinite;
}

.is-theme-transitioning { overflow: hidden; }

@keyframes theme-transition-spin {
  to { transform: rotate(360deg); }
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.theme-choice {
  max-width: 44rem;
}

.theme-choice__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.theme-choice__option {
  display: grid;
  grid-template-columns: auto 4rem 1fr;
  align-items: center;
  gap: var(--space-3);
  min-height: 4.5rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.theme-choice__option:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-focus) 35%, transparent);
}

.theme-choice__preview {
  display: block;
  width: 4rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 0.45rem currentColor;
}

.theme-choice__preview--light {
  color: #f1f5fb;
  background: #ffffff;
}

.theme-choice__preview--dark {
  color: #292f35;
  background: #15191d;
}

@media (max-width: 640px) {
  .theme-choice__options { grid-template-columns: 1fr; }
}