/*
 * Dark theme tokens (see src/util/theme.js and server/theme.js for how `data-theme`
 * reaches <html>). Kept as a static file, outside the CSS bundle, because the
 * bundler's postcss-apply rejects custom properties declared outside a bare `:root`
 * (and CI builds turn that warning into a failure). These selectors are more
 * specific than the bundle's `:root`, so load order does not matter.
 */
:root[data-theme='dark'] {
  color-scheme: dark;
  /* html text colour (light mode keeps its own #4a4a4a, see marketplaceDefaults.css) */
  color: var(--textPrimary);

  /* Brand navy scale (DJOB Normes graphiques V5): Marin #1C0F59 is the page,
     surfaces step up in lightness, borders are a navy tint. Blue text/links/
     icons become Menthe #01F2B4, body text Menthe pale #F4FCFA. */
  --matterColorText: #f4fcfa;
  --marketplaceTextColor: #f4fcfa;
  --matterColorAnti: #a59fd0;
  --matterColorNegative: #3a2c8f;
  --matterColorDivBorder: #3a2c8f66;
  --matterColorWhiteSmoke: #251768;
  --matterColorWhiteSmoke2: #251768;
  --matterColorBright: #251768;
  --matterColorAzure: #251768;
  --matterColorDimGrayTrans: rgba(185, 180, 217, 0.25);
  --matterColorTransDimGray: #b9b4d970;
  --matterColorErrorInputBG: #ef202033;
  --modalContainerBg: #0f0833cc;

  --surfaceBg: #1c0f59;
  --surfaceCard: #251768;
  --surfaceSubtle: #2c1d78;
  --surfaceInput: #2c1d78;
  --textPrimary: #f4fcfa;
  --textSecondary: #b9b4d9;
  --textMuted: #b9b4d9;
  --textFaint: #8f88c2;
  --textBody: #d6d1f2;
  --inkAccent: #01f2b4;
  --inkSurface: #3a2c8f;
  --lit-4d4f56: #b9b4d9;
  --lit-666666: #b9b4d9;
  --lit-555555: #b9b4d9;
  --lit-7a7a7a: #b9b4d9;
  --lit-1a1a2e: #f4fcfa;
  --lit-444444: #b9b4d9;
  --lit-717171: #b9b4d9;
  --lit-747474: #b9b4d9;
  --lit-4b5563: #b9b4d9;
  --lit-313131: #f4fcfa;
  --lit-1f2937: #f4fcfa;
  --lt-f3f4f6: #2c1d78;
  --darkInk: #f4fcfa;
  --onMint: #1c0f59;
  --onmint-000000: #1c0f59;
  --onmint-111111: #1c0f59;
  --onmint-1c0f59: #1c0f59;
  --accent70: rgb(1 242 180 / 70%);
  --accent40: rgb(1 242 180 / 40%);
  --accentPink: #f4fcfa;
  --lit-000000: #f4fcfa;
  --lit-0a0a0a: #f4fcfa;
  --lit-111111: #f4fcfa;
  --lit-111827: #f4fcfa;
  --lit-1a1a1a: #f4fcfa;
  --lit-222222: #f4fcfa;
  --lit-241f4d: #f4fcfa;
  --lit-333333: #f4fcfa;
  --lit-57606d: #b9b4d9;
  --navyA4: rgba(244, 252, 250, 0.55);
  --navyA5: rgba(244, 252, 250, 0.62);
  --navyA6: rgba(244, 252, 250, 0.7);
  --navyBorderA4: rgba(244, 252, 250, 0.28);
  --navyBorderA5: rgba(244, 252, 250, 0.34);
  --tabUnderline: #01f2b4;
  --grayA20: rgba(244, 252, 250, 0.35);
  --grayA40: rgba(244, 252, 250, 0.55);
  --grayA42: rgba(244, 252, 250, 0.58);
  --blackA5: rgba(244, 252, 250, 0.6);
  --lit-6b7280: #b9b4d9;
  --lit-dddddd: #3a2c8f;
  --lit-e5e7eb: #3a2c8f;
  --lit-e8e8e8: #3a2c8f;
  --lit-eeeeee: #2c1d78;
  --lit-efefef: #3a2c8f;
  --lit-f2f2f2: #2c1d78;
  --lit-f3f4f6: #3a2c8f;
  --lit-f8f8f8: #2c1d78;
  --lit-f9f9f9: #2c1d78;
  --lt-67e8f9: #34248a;
  --lt-7ee6d1: #34248a;
  --lt-d2f4ee: #34248a;
  --lt-d7d7d7: #34248a;
  --lt-dcd9d2: #34248a;
  --lt-e4e7ee: #34248a;
  --lt-e5e7eb: #34248a;
  --lt-e6f0ff: #2c1d78;
  --lt-e7e7e7: #34248a;
  --lt-edf2ff: #2c1d78;
  --lt-eeebe5: #34248a;
  --lt-eef1ff: #2c1d78;
  --lt-eff6ff: #2c1d78;
  --lt-f0ebff: #2c1d78;
  --lt-f0f0f0: #2c1d78;
  --lt-f1efeb: #2c1d78;
  --lt-f1f1f1: #2c1d78;
  --lt-f1f2f6: #2c1d78;
  --lt-f1f2fe: #2c1d78;
  --lt-f2f2f2: #2c1d78;
  --lt-f2f6ff: #2c1d78;
  --lt-f3f1ed: #2c1d78;
  --lt-f3f1fa: #2c1d78;
  --lt-f3f3f3: #2c1d78;
  --lt-f4f5fa: #2c1d78;
  --lt-f4fcfa: #2c1d78;
  --lt-f5f3ff: #2c1d78;
  --lt-f5f6fb: #2c1d78;
  --lt-f5f7ff: #2c1d78;
  --lt-f7f7f7: #2c1d78;
  --lt-f7f8ff: #2c1d78;
  --lt-f7f9fc: #2c1d78;
  --lt-f7f9ff: #2c1d78;
  --lt-f8f7fc: #2c1d78;
  --lt-f9fafb: #2c1d78;
  --lt-faf9f7: #2c1d78;
  --lt-fafafa: #2c1d78;
  --lt-fafbff: #2c1d78;
  --lt-fbfaf8: #2c1d78;
  --lt-fbfbff: #251768;
  --lt-fcd34d: #34248a;
  --lt-fcfcfb: #251768;
  --lt-fdf2f8: #2c1d78;
  --lt-fdf4f4: #2c1d78;
  --lt-fdfdfd: #251768;
  --lt-fef2f2: #2c1d78;
  --lt-ffe6e6: #34248a;
  --lt-ffe6f2: #34248a;
  --lt-fff1f1: #2c1d78;
  --lt-fff7ed: #2c1d78;
  --lt-fff8ef: #2c1d78;
  --lt-fff9ec: #2c1d78;
  --lt-fffaf0: #2c1d78;
  --lt-ffffff: #251768;
  --matterColorShuttleGrey: #b9b4d9;
  --matterColorDarkGrey: #b9b4d9;
  --matterColorDimGray: #a59fd0;
  --matterColorAlmostDark: #f4fcfa;
  --borderSubtle: #3a2c8f;

  /* Blue text/links/icons/outlines -> Menthe on navy */
  --accent: #01f2b4;
  --accentAlt: #01f2b4;
  /* Blue tint surfaces (chips, table headers, selected rows) */
  --tintBlue1: #34248a;
  --tintBlue2: #2c1d78;
  --tintBlue3: #2c1d78;
  --tintBlue4: #2c1d78;
}

/* No-JS fallback for the "system" mode: the server stamps data-theme-mode="system" without a data-theme,
   and the inline script in <head> normally sets data-theme to the resolved theme. When scripts are off,
   only the TOKENS follow the OS (component-level [data-theme='dark'] rules need JS). :not([data-theme='light'])
   keeps it from fighting a JS-resolved "light" on a light OS; on a dark OS both blocks are identical. */
@media (prefers-color-scheme: dark) {
  :root[data-theme-mode='system']:not([data-theme='light']) {
    color-scheme: dark;
    color: var(--textPrimary);
    --matterColorText: #f4fcfa;
    --marketplaceTextColor: #f4fcfa;
    --matterColorAnti: #a59fd0;
    --matterColorNegative: #3a2c8f;
    --matterColorDivBorder: #3a2c8f66;
    --matterColorWhiteSmoke: #251768;
    --matterColorWhiteSmoke2: #251768;
    --matterColorBright: #251768;
    --matterColorAzure: #251768;
    --matterColorDimGrayTrans: rgba(185, 180, 217, 0.25);
    --matterColorTransDimGray: #b9b4d970;
    --matterColorErrorInputBG: #ef202033;
    --modalContainerBg: #0f0833cc;
    --surfaceBg: #1c0f59;
    --surfaceCard: #251768;
    --surfaceSubtle: #2c1d78;
    --surfaceInput: #2c1d78;
    --textPrimary: #f4fcfa;
    --textSecondary: #b9b4d9;
    --textMuted: #b9b4d9;
    --textFaint: #8f88c2;
    --textBody: #d6d1f2;
    --inkAccent: #01f2b4;
    --inkSurface: #3a2c8f;
    --lit-4d4f56: #b9b4d9;
    --lit-666666: #b9b4d9;
    --lit-555555: #b9b4d9;
    --lit-7a7a7a: #b9b4d9;
    --lit-1a1a2e: #f4fcfa;
    --lit-444444: #b9b4d9;
    --lit-717171: #b9b4d9;
    --lit-747474: #b9b4d9;
    --lit-4b5563: #b9b4d9;
    --lit-313131: #f4fcfa;
    --lit-1f2937: #f4fcfa;
    --lt-f3f4f6: #2c1d78;
    --darkInk: #f4fcfa;
    --onMint: #1c0f59;
    --onmint-000000: #1c0f59;
    --onmint-111111: #1c0f59;
    --onmint-1c0f59: #1c0f59;
    --accent70: rgb(1 242 180 / 70%);
    --accent40: rgb(1 242 180 / 40%);
    --accentPink: #f4fcfa;
    --lit-000000: #f4fcfa;
    --lit-0a0a0a: #f4fcfa;
    --lit-111111: #f4fcfa;
    --lit-111827: #f4fcfa;
    --lit-1a1a1a: #f4fcfa;
    --lit-222222: #f4fcfa;
    --lit-241f4d: #f4fcfa;
    --lit-333333: #f4fcfa;
    --lit-57606d: #b9b4d9;
    --navyA4: rgba(244, 252, 250, 0.55);
    --navyA5: rgba(244, 252, 250, 0.62);
    --navyA6: rgba(244, 252, 250, 0.7);
    --navyBorderA4: rgba(244, 252, 250, 0.28);
    --navyBorderA5: rgba(244, 252, 250, 0.34);
    --tabUnderline: #01f2b4;
    --grayA20: rgba(244, 252, 250, 0.35);
    --grayA40: rgba(244, 252, 250, 0.55);
    --grayA42: rgba(244, 252, 250, 0.58);
    --blackA5: rgba(244, 252, 250, 0.6);
    --lit-6b7280: #b9b4d9;
    --lit-dddddd: #3a2c8f;
    --lit-e5e7eb: #3a2c8f;
    --lit-e8e8e8: #3a2c8f;
    --lit-eeeeee: #2c1d78;
    --lit-efefef: #3a2c8f;
    --lit-f2f2f2: #2c1d78;
    --lit-f3f4f6: #3a2c8f;
    --lit-f8f8f8: #2c1d78;
    --lit-f9f9f9: #2c1d78;
    --lt-67e8f9: #34248a;
    --lt-7ee6d1: #34248a;
    --lt-d2f4ee: #34248a;
    --lt-d7d7d7: #34248a;
    --lt-dcd9d2: #34248a;
    --lt-e4e7ee: #34248a;
    --lt-e5e7eb: #34248a;
    --lt-e6f0ff: #2c1d78;
    --lt-e7e7e7: #34248a;
    --lt-edf2ff: #2c1d78;
    --lt-eeebe5: #34248a;
    --lt-eef1ff: #2c1d78;
    --lt-eff6ff: #2c1d78;
    --lt-f0ebff: #2c1d78;
    --lt-f0f0f0: #2c1d78;
    --lt-f1efeb: #2c1d78;
    --lt-f1f1f1: #2c1d78;
    --lt-f1f2f6: #2c1d78;
    --lt-f1f2fe: #2c1d78;
    --lt-f2f2f2: #2c1d78;
    --lt-f2f6ff: #2c1d78;
    --lt-f3f1ed: #2c1d78;
    --lt-f3f1fa: #2c1d78;
    --lt-f3f3f3: #2c1d78;
    --lt-f4f5fa: #2c1d78;
    --lt-f4fcfa: #2c1d78;
    --lt-f5f3ff: #2c1d78;
    --lt-f5f6fb: #2c1d78;
    --lt-f5f7ff: #2c1d78;
    --lt-f7f7f7: #2c1d78;
    --lt-f7f8ff: #2c1d78;
    --lt-f7f9fc: #2c1d78;
    --lt-f7f9ff: #2c1d78;
    --lt-f8f7fc: #2c1d78;
    --lt-f9fafb: #2c1d78;
    --lt-faf9f7: #2c1d78;
    --lt-fafafa: #2c1d78;
    --lt-fafbff: #2c1d78;
    --lt-fbfaf8: #2c1d78;
    --lt-fbfbff: #251768;
    --lt-fcd34d: #34248a;
    --lt-fcfcfb: #251768;
    --lt-fdf2f8: #2c1d78;
    --lt-fdf4f4: #2c1d78;
    --lt-fdfdfd: #251768;
    --lt-fef2f2: #2c1d78;
    --lt-ffe6e6: #34248a;
    --lt-ffe6f2: #34248a;
    --lt-fff1f1: #2c1d78;
    --lt-fff7ed: #2c1d78;
    --lt-fff8ef: #2c1d78;
    --lt-fff9ec: #2c1d78;
    --lt-fffaf0: #2c1d78;
    --lt-ffffff: #251768;
    --matterColorShuttleGrey: #b9b4d9;
    --matterColorDarkGrey: #b9b4d9;
    --matterColorDimGray: #a59fd0;
    --matterColorAlmostDark: #f4fcfa;
    --borderSubtle: #3a2c8f;
    --accent: #01f2b4;
    --accentAlt: #01f2b4;
    --tintBlue1: #34248a;
    --tintBlue2: #2c1d78;
    --tintBlue3: #2c1d78;
    --tintBlue4: #2c1d78;
  }
}

/*
 * react-dates (public/static/reactDates.css) ships with every surface
 * hard-coded white and every text hard-coded near-black — none of it
 * reachable from the CSS Modules bundle. Dark overrides for the
 * structural chrome (input, popup surface, nav, weekday header, default/
 * outside/blocked day cells). The teal "selected"/"today" accent
 * (#00a699 bg + white text) already has enough contrast and is left
 * alone, same for the keyboard-shortcuts panel's own dark background.
 */
:root[data-theme='dark'] .SingleDatePickerInput,
:root[data-theme='dark'] .SingleDatePicker_picker,
:root[data-theme='dark'] .DateRangePickerInput,
:root[data-theme='dark'] .DayPicker,
:root[data-theme='dark'] .DayPicker__horizontal,
:root[data-theme='dark'] .DayPicker_weekHeader__verticalScrollable,
:root[data-theme='dark'] .CalendarMonthGrid,
:root[data-theme='dark'] .CalendarMonth,
:root[data-theme='dark'] .DateInput,
:root[data-theme='dark'] .DateInput_input,
:root[data-theme='dark'] .DateInput_input__focused {
  background: var(--surfaceCard);
  background-color: var(--surfaceCard);
}
:root[data-theme='dark'] .SingleDatePickerInput__withBorder,
:root[data-theme='dark'] .DateRangePickerInput__withBorder,
:root[data-theme='dark'] .DayPicker__withBorder {
  border-color: var(--borderSubtle);
}
:root[data-theme='dark'] .SingleDatePickerInput__disabled,
:root[data-theme='dark'] .DateInput__disabled,
:root[data-theme='dark'] .DateInput_input__disabled,
:root[data-theme='dark'] .DateRangePickerInput__disabled {
  background: var(--surfaceSubtle);
  background-color: var(--surfaceSubtle);
}
:root[data-theme='dark'] .DateInput_input,
:root[data-theme='dark'] .CalendarMonth_caption,
:root[data-theme='dark'] .CalendarDay__default,
:root[data-theme='dark'] .CalendarDay__outside {
  color: var(--textPrimary);
}
:root[data-theme='dark'] .DayPicker_weekHeader {
  color: var(--textSecondary);
}
:root[data-theme='dark'] .CalendarDay__default {
  background: var(--surfaceCard);
  border: 1px solid var(--borderSubtle);
}
:root[data-theme='dark'] .CalendarDay__default:hover,
:root[data-theme='dark'] .CalendarDay__hovered_offset {
  background: var(--surfaceSubtle);
  border: 1px double var(--borderSubtle);
}
:root[data-theme='dark'] .CalendarDay__outside,
:root[data-theme='dark'] .CalendarDay__blocked_out_of_range {
  background: var(--surfaceBg);
  border-color: var(--borderSubtle);
}
:root[data-theme='dark'] .CalendarDay__blocked_calendar,
:root[data-theme='dark'] .CalendarDay__blocked_calendar:active,
:root[data-theme='dark'] .CalendarDay__blocked_calendar:hover {
  background: var(--surfaceSubtle);
  border-color: var(--borderSubtle);
  color: var(--textSecondary);
}
:root[data-theme='dark'] .SingleDatePickerInput_clearDate_svg,
:root[data-theme='dark'] .SingleDatePickerInput_calendarIcon_svg,
:root[data-theme='dark'] .DateRangePickerInput_calendarIcon_svg,
:root[data-theme='dark'] .DateRangePickerInput_arrow_svg {
  fill: var(--textSecondary);
}

/*
 * public/static/global.css's `.textfield` block (shared label/input/
 * textarea styling used by ~20 forms, including Login/Signup) hard-codes
 * a brand-purple (rgb(28, 15, 89, …)) border/placeholder/autofill that
 * can't become a reactive var() without also changing the light-mode
 * pixels (no existing token matches "marketplace ink at N% opacity").
 * Targeted dark overrides instead; label/input text/background there
 * already use var(--marketplaceTextColor)/var(--surfaceInput), which are
 * reactive on their own.
 */
:root[data-theme='dark'] .textfield > input,
:root[data-theme='dark'] .textfield > button,
:root[data-theme='dark'] .textfield > textarea {
  border-color: var(--borderSubtle) !important;
}
:root[data-theme='dark'] .textfield > input::placeholder,
:root[data-theme='dark'] .textfield > textarea::placeholder {
  color: var(--textSecondary) !important;
}
:root[data-theme='dark'] input:-webkit-autofill,
:root[data-theme='dark'] input:-webkit-autofill:hover,
:root[data-theme='dark'] input:-webkit-autofill:focus,
:root[data-theme='dark'] input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--textPrimary);
  box-shadow: inset 0 0 20px 20px var(--surfaceInput);
}

/* BusinessDjobDetailPage ships its own --dj-* token system in a bare :root (module CSS),
   remapped here onto the navy scale (ink scale inverted: ink-900 = text). */
:root[data-theme='dark'] {
  --dj-blue: #01f2b4;
  --dj-blue-700: #01f2b4;
  --dj-blue-100: #3a2c8f;
  --dj-blue-50: #34248a;
  --dj-blue-25: #2c1d78;
  --dj-pink-600: #fedbff;
  --dj-pink-100: #5b2c8f;
  --dj-pink-50: #4a2480;
  --dj-ink-900: #f4fcfa;
  --dj-ink-800: #ebe8fa;
  --dj-ink-700: #d6d1f2;
  --dj-ink-600: #b9b4d9;
  --dj-ink-500: #a59fd0;
  --dj-ink-400: #8f88c2;
  --dj-ink-300: #6f66b3;
  --dj-ink-200: #3a2c8f;
  --dj-ink-100: #34248a;
  --dj-ink-50: #2c1d78;
  --dj-bg: #1c0f59;
  --dj-bg2: #21136a;
  --dj-card: #251768;
  --dj-line: #3a2c8f;
  --dj-line-strong: #4a3ca3;
  --dj-success-700: #7ff5d4;
  --dj-success-50: #0f4a4a;
  --dj-warning-50: #4b3b1f;
  --dj-danger: #ff7a96;
  --dj-danger-50: #4a1e3a;
}

/* close.svg (the shared modal "X", 13.426px) has no fill, so it renders black: make it follow the text colour. */
:root[data-theme='dark'] svg[width='13.426'] path {
  fill: var(--textPrimary);
}

/* Feature-card illustrations (WhySos*, HowDoesItWork, BusinessComp): grey #707070 outline icons are too dim on navy. */
:root[data-theme='dark'] [class*='WhySos'] [stroke='#707070'],
:root[data-theme='dark'] [class*='HowDoesItWork'] [stroke='#707070'],
:root[data-theme='dark'] [class*='BusinessComp'] [stroke='#707070'] {
  stroke: var(--textSecondary);
}
:root[data-theme='dark'] [class*='WhySos'] [fill='#707070'],
:root[data-theme='dark'] [class*='HowDoesItWork'] [fill='#707070'],
:root[data-theme='dark'] [class*='BusinessComp'] [fill='#707070'] {
  fill: var(--textSecondary);
}
:root[data-theme='dark'] [class*='WhySos'] [stroke='#1C0F59'] {
  stroke: var(--textSecondary);
}
:root[data-theme='dark'] [class*='WhySos'] [fill='#1C0F59'] {
  fill: var(--textSecondary);
}
:root[data-theme='dark'] [class*='WhySos'] img,
:root[data-theme='dark'] [class*='HowDoesItWork'] img {
  filter: brightness(1.7);
}

/* CMS pages (PageBuilder: terms, privacy, ...) inline their section background (#fafafa/#fff default),
   which no stylesheet can reach without !important. SSR serialises it as `background-color:#fafafa`,
   the client as `background-color: rgb(250, 250, 250)`: both forms (and any case) are matched. Only the
   neutral light defaults are remapped, brand-coloured section backgrounds are untouched. */
:root[data-theme='dark'] [style*='background-color:#fafafa;' i],
:root[data-theme='dark'] [style$='background-color:#fafafa' i],
:root[data-theme='dark'] [style*='background-color: #fafafa;' i],
:root[data-theme='dark'] [style$='background-color: #fafafa' i],
:root[data-theme='dark'] [style*='background-color:#fafafb;' i],
:root[data-theme='dark'] [style$='background-color:#fafafb' i],
:root[data-theme='dark'] [style*='background-color: #fafafb;' i],
:root[data-theme='dark'] [style$='background-color: #fafafb' i],
:root[data-theme='dark'] [style*='background-color:#ffffff;' i],
:root[data-theme='dark'] [style$='background-color:#ffffff' i],
:root[data-theme='dark'] [style*='background-color: #ffffff;' i],
:root[data-theme='dark'] [style$='background-color: #ffffff' i],
:root[data-theme='dark'] [style*='background-color:#fff;' i],
:root[data-theme='dark'] [style$='background-color:#fff' i],
:root[data-theme='dark'] [style*='background-color: #fff;' i],
:root[data-theme='dark'] [style$='background-color: #fff' i],
:root[data-theme='dark'] [style*='background-color:#f5f5f5;' i],
:root[data-theme='dark'] [style$='background-color:#f5f5f5' i],
:root[data-theme='dark'] [style*='background-color: #f5f5f5;' i],
:root[data-theme='dark'] [style$='background-color: #f5f5f5' i],
:root[data-theme='dark'] [style*='background-color: rgb(250, 250, 250)'],
:root[data-theme='dark'] [style*='background-color: rgb(250, 250, 251)'],
:root[data-theme='dark'] [style*='background-color: rgb(255, 255, 255)'],
:root[data-theme='dark'] [style*='background-color: rgb(245, 245, 245)'] {
  background-color: var(--surfaceBg) !important;
}

/* Placeholders. Many module rules force a navy rgb(28,15,89,.5) with !important (Signup, SendMessage,
   PaymentMethods, Stripe*, WorkerProfileView...), invisible on navy inputs: match !important and win on
   specificity by repeating :root. */
:root:root:root[data-theme='dark'] input::placeholder,
:root:root:root[data-theme='dark'] textarea::placeholder {
  color: #b9b4d9 !important;
  opacity: 1;
}

/* Text selection: the light-blue (#b3d4fc) selection with dark text is replaced by brand mint + Marin. */
:root[data-theme='dark'] ::selection {
  background: #01f2b4;
  color: #1c0f59;
}
:root[data-theme='dark'] ::-moz-selection {
  background: #01f2b4;
  color: #1c0f59;
}