:root {
  /* Base tokens — "Default" accent, light mode */
  --color-bg: #F0F2F4;
  --color-card-bg: #ffffff;
  --color-border: #e2e8f0;
  --color-text: #64748B;
  --color-muted: #64748B;
  --color-primary: #007a81;
  --color-primary-deep: #007A81;
  --color-accent: #95C11F;
  --color-danger: #d23b41;
  --color-danger-hover: #b52f35;
  --color-required: #e02424;
  --color-text-user: #0F172A;

  /* Each accent's dark brand color — constant regardless of light/dark mode.
     Used for chrome elements (e.g. the logout button) that always read as "dark". */
  --color-chrome-bg: #153032;
}

/* ---- Accent color (applies in both light and dark mode) ---- */

:root[data-accent='orange'] {
  --color-primary: #eb8947;
  --color-primary-deep: #c96f34;
  --color-chrome-bg: #1e1e2c;
}

:root[data-accent='modern'] {
  --color-primary: #2563eb;
  --color-primary-deep: #1d4ed8;
  --color-chrome-bg: #000c27;
}

:root[data-accent='ectoplasm'] {
  --color-primary: #a4b643;
  --color-primary-deep: #8a9a37;
  --color-chrome-bg: #413154;
}

/* ---- Dark mode: tokens shared by every accent ---- */

:root[data-mode='dark'] {
  --color-text: #eef3f5;
  --color-muted: #9fb2ba;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-bg: var(--color-chrome-bg);
}

/* ---- Dark mode: surface/card get a lighter tint of the accent's chrome color ---- */

:root[data-accent='default'][data-mode='dark'] {
  --color-surface: #1c3d40;
  --color-card-bg: #1c3d40;
}

:root[data-accent='orange'][data-mode='dark'] {
  --color-surface: #272736;
  --color-card-bg: #272736;
}

:root[data-accent='modern'][data-mode='dark'] {
  --color-surface: #071a3d;
  --color-card-bg: #071a3d;
}

:root[data-accent='ectoplasm'][data-mode='dark'] {
  --color-surface: #4b3a60;
  --color-card-bg: #4b3a60;
}