:root {
    /* Base tokens — "Default" accent, light mode */
    --color-bg: #F0F2F4;
    --color-card-bg: #ffffff;
    --color-white: #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;
    --apple-green: #81B200;
    --santas-gray: #98A2B3;
    --authentic-white: #F7F9FB;
    --snow-white: #F3F6FB;
    --snow-cream: #E7EBF2;
    --mirage: #101828;
    --aureoline-yellow: #FBA81C;
    --deep-blue-green: #00676d;
    --balance-yellow: #de900b;
    --black-pearl: #04191b;
    --aqua-squeeze: #E6F4F3;
    --bright-chrome: #F7F9FC;
    --white-marble: #E5E7EB;
    --bright-chrome-light: #E7EBF2;
    --infinity: #F0FBF5;
    --renewable-energy: #23C16B;
    /* 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;
    --traditional-turquoise: #009DA5;
}

/* ---- 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;
}