/*
 * Wizardline brand palette layered ON TOP of the Meridian base theme.
 *
 * This file is loaded LAST (after meridian-main.css and, in dark mode, after
 * the injected meridian-main-dark.css), so these :root tokens win over both
 * Meridian swatches. The LIGHT block below is the wizardline palette copied
 * verbatim from the former src/styles/kendo-theme.css (prior sync 7df3fe9), so
 * light mode is unchanged.
 *
 * The [data-theme-mode="dark"] block re-asserts ONLY the brand accent tokens
 * (primary/secondary/tertiary/info/error/success/warning families + series),
 * leaving Meridian's dark surface/text/base/border tokens alone so dark mode
 * reads as a proper dark variant with wizardline accents. The flash-prevention
 * script in layout.tsx and the useKendoTheme hook both set data-theme-mode on
 * <html>, so this selector is active exactly in dark mode.
 */

:root {
  --kendo-color-app-surface: #f9f9f9;
  --kendo-color-on-app-surface: #0a1a36;
  --kendo-color-subtle: #52607a;
  --kendo-color-surface: #ffffff;
  --kendo-color-surface-alt: #f9f9f9;
  --kendo-color-on-surface: #0a1a36;
  --kendo-color-on-surface-alt: #0a1a36;
  --kendo-color-border: #d3e1f2;
  --kendo-color-border-alt: #d3e1f2;

  --kendo-color-base: #e3ecf7;
  --kendo-color-base-hover: #d3e1f2;
  --kendo-color-base-active: #bdd3eb;
  --kendo-color-base-subtle: #f3f7fc;
  --kendo-color-base-subtle-hover: #ebf2f9;
  --kendo-color-base-subtle-active: #dee9f5;
  --kendo-color-on-base: #0a1a36;
  --kendo-color-base-emphasis: #387abe;
  --kendo-color-base-on-subtle: #0a1a36;
  --kendo-color-base-on-surface: #0a1a36;

  --kendo-color-primary: #387abe;
  --kendo-color-primary-hover: #316ca9;
  --kendo-color-primary-active: #295d93;
  --kendo-color-primary-subtle: #e3ecf7;
  --kendo-color-primary-subtle-hover: #d3e1f2;
  --kendo-color-primary-subtle-active: #bdd3eb;
  --kendo-color-on-primary: #ffffff;
  --kendo-color-primary-emphasis: #295d93;
  --kendo-color-primary-on-subtle: #1d4670;
  --kendo-color-primary-on-surface: #316ca9;

  --kendo-color-secondary: #73005c;
  --kendo-color-secondary-hover: #660051;
  --kendo-color-secondary-active: #580046;
  --kendo-color-secondary-subtle: #eddde7;
  --kendo-color-secondary-subtle-hover: #e3c9d9;
  --kendo-color-secondary-subtle-active: #d4afc7;
  --kendo-color-on-secondary: #ffffff;
  --kendo-color-secondary-emphasis: #580046;
  --kendo-color-secondary-on-subtle: #420033;
  --kendo-color-secondary-on-surface: #660051;

  --kendo-color-tertiary: #73005c;
  --kendo-color-tertiary-hover: #660051;
  --kendo-color-tertiary-active: #580046;
  --kendo-color-tertiary-subtle: #eddde7;
  --kendo-color-tertiary-subtle-hover: #e3c9d9;
  --kendo-color-tertiary-subtle-active: #d4afc7;
  --kendo-color-on-tertiary: #ffffff;
  --kendo-color-tertiary-emphasis: #580046;
  --kendo-color-tertiary-on-subtle: #420033;
  --kendo-color-tertiary-on-surface: #660051;

  --kendo-color-info: #387abe;
  --kendo-color-info-hover: #316ca9;
  --kendo-color-info-active: #295d93;
  --kendo-color-info-subtle: #e3ecf7;
  --kendo-color-info-subtle-hover: #d3e1f2;
  --kendo-color-info-subtle-active: #bdd3eb;
  --kendo-color-on-info: #ffffff;
  --kendo-color-info-emphasis: #295d93;
  --kendo-color-info-on-subtle: #1d4670;
  --kendo-color-info-on-surface: #316ca9;

  --kendo-color-error: #e62234;
  --kendo-color-error-hover: #cd1d2d;
  --kendo-color-error-active: #b21826;
  --kendo-color-error-subtle: #ffe5e3;
  --kendo-color-error-subtle-hover: #ffd6d3;
  --kendo-color-error-subtle-active: #ffc1bc;
  --kendo-color-on-error: #ffffff;
  --kendo-color-error-emphasis: #b21826;
  --kendo-color-error-on-subtle: #89101b;
  --kendo-color-error-on-surface: #cd1d2d;

  --kendo-color-success: #99b455;
  --kendo-color-success-hover: #88a04b;
  --kendo-color-success-active: #768b40;
  --kendo-color-success-subtle: #f0f5e8;
  --kendo-color-success-subtle-hover: #e8efdb;
  --kendo-color-success-subtle-active: #dce6c8;
  --kendo-color-on-success: #101405;
  --kendo-color-success-emphasis: #768b40;
  --kendo-color-success-on-subtle: #596a2f;
  --kendo-color-success-on-surface: #88a04b;

  --kendo-color-warning: #e6771d;
  --kendo-color-warning-hover: #cd6919;
  --kendo-color-warning-active: #b25b14;
  --kendo-color-warning-subtle: #feede3;
  --kendo-color-warning-subtle-hover: #fde2d2;
  --kendo-color-warning-subtle-active: #fbd3bc;
  --kendo-color-on-warning: #1d0901;
  --kendo-color-warning-emphasis: #b25b14;
  --kendo-color-warning-on-subtle: #89440d;
  --kendo-color-warning-on-surface: #cd6919;

  --kendo-color-series-a: #387abe;
  --kendo-color-series-b: #73005c;
  --kendo-color-series-c: #e62234;
  --kendo-color-series-d: #332df2;
  --kendo-color-series-e: #99b455;
  --kendo-color-series-f: #0a1a36;
}

/*
 * Dark mode: mirror wizardline-app's dark palette VERBATIM — surfaces, text,
 * base, border, AND every accent family + series — copied from
 * wizardline-app/public/kendo-themes/wizardline-theme.css
 * (:root[data-kendo-theme="wizardline"][data-theme-mode="dark"]). The bare
 * [data-theme-mode="dark"] attribute selector has the same specificity (0,1,0)
 * as Meridian's dark `:root` swatch, so it wins only because this file loads
 * LAST (after the injected meridian-main-dark.css); no !important needed on the
 * tokens. This replaces Meridian's dark surface/base/border/text tokens so dark
 * mode reads as wizardline's dark theme, not Meridian's.
 *
 * The --wiz-* overrides at the end of this block repaint the shell drawer
 * (shell.module.css reads --wiz-surface / --wiz-border / --wiz-primary-subtle /
 * --wiz-blue) to the wizardline dark values, so the sidebar surface, border,
 * and inactive-item hover follow dark mode without touching the component.
 */
[data-theme-mode="dark"] {
  --wizardline-blue: #387abe;
  --wizardline-navy: #0a1a36;
  --wizardline-purple: #73005c;
  --wizardline-red: #e62234;
  --wizardline-neutral: #f9f9f9;
  --wizardline-indigo: #332df2;
  --wizardline-green: #99b455;
  --wizardline-yellow: #e7e100;
  --wizardline-orange: #e6771d;

  --kendo-color-app-surface: #111217;
  --kendo-color-on-app-surface: #f4f5f7;
  --kendo-color-subtle: #b3b7c2;
  --kendo-color-surface: #1c1e24;
  --kendo-color-surface-alt: #17191f;
  --kendo-color-on-surface: #f4f5f7;
  --kendo-color-on-surface-alt: #e1e3e8;
  --kendo-color-border: #f4f5f7;
  --kendo-color-border-alt: #858b9980;

  --kendo-color-base: #292c34;
  --kendo-color-base-hover: #323640;
  --kendo-color-base-active: #3b404c;
  --kendo-color-base-subtle: #202229;
  --kendo-color-base-subtle-hover: #292c34;
  --kendo-color-base-subtle-active: #323640;
  --kendo-color-on-base: #f4f5f7;
  --kendo-color-base-emphasis: #8f96a3;
  --kendo-color-base-on-subtle: #f4f5f7;
  --kendo-color-base-on-surface: #f4f5f7;

  --kendo-color-primary: #6d9cd0;
  --kendo-color-primary-hover: #80a9d7;
  --kendo-color-primary-active: #94b7de;
  --kendo-color-primary-subtle: #1c2d3f;
  --kendo-color-primary-subtle-hover: #24374c;
  --kendo-color-primary-subtle-active: #2c425a;
  --kendo-color-on-primary: #07111f;
  --kendo-color-primary-emphasis: #94b7de;
  --kendo-color-primary-on-subtle: #dfeaf6;
  --kendo-color-primary-on-surface: #80a9d7;

  --kendo-color-secondary: #9a4e84;
  --kendo-color-secondary-hover: #a96694;
  --kendo-color-secondary-active: #b87ea5;
  --kendo-color-secondary-subtle: #2c1225;
  --kendo-color-secondary-subtle-hover: #36182d;
  --kendo-color-secondary-subtle-active: #411d36;
  --kendo-color-on-secondary: #171019;
  --kendo-color-secondary-emphasis: #b87ea5;
  --kendo-color-secondary-on-subtle: #ebd8e4;
  --kendo-color-secondary-on-surface: #a96694;

  --kendo-color-tertiary: #9a4e84;
  --kendo-color-tertiary-hover: #a96694;
  --kendo-color-tertiary-active: #b87ea5;
  --kendo-color-tertiary-subtle: #2c1225;
  --kendo-color-tertiary-subtle-hover: #36182d;
  --kendo-color-tertiary-subtle-active: #411d36;
  --kendo-color-on-tertiary: #171019;
  --kendo-color-tertiary-emphasis: #b87ea5;
  --kendo-color-tertiary-on-subtle: #ebd8e4;
  --kendo-color-tertiary-on-surface: #a96694;

  --kendo-color-info: #6d9cd0;
  --kendo-color-info-hover: #80a9d7;
  --kendo-color-info-active: #94b7de;
  --kendo-color-info-subtle: #1c2d3f;
  --kendo-color-info-subtle-hover: #24374c;
  --kendo-color-info-subtle-active: #2c425a;
  --kendo-color-on-info: #07111f;
  --kendo-color-info-emphasis: #94b7de;
  --kendo-color-info-on-subtle: #dfeaf6;
  --kendo-color-info-on-surface: #80a9d7;

  --kendo-color-error: #f46d69;
  --kendo-color-error-hover: #f8837d;
  --kendo-color-error-active: #fc9892;
  --kendo-color-error-subtle: #4b1d1b;
  --kendo-color-error-subtle-hover: #5b2422;
  --kendo-color-error-subtle-active: #6b2c2a;
  --kendo-color-on-error: #1a0d10;
  --kendo-color-error-emphasis: #fc9892;
  --kendo-color-error-on-subtle: #ffe2df;
  --kendo-color-error-on-surface: #f8837d;

  --kendo-color-success: #b2c783;
  --kendo-color-success-hover: #bccf95;
  --kendo-color-success-active: #c7d7a6;
  --kendo-color-success-subtle: #343c24;
  --kendo-color-success-subtle-hover: #40492d;
  --kendo-color-success-subtle-active: #4c5636;
  --kendo-color-on-success: #0f1405;
  --kendo-color-success-emphasis: #c7d7a6;
  --kendo-color-success-on-subtle: #eef3e5;
  --kendo-color-success-on-surface: #bccf95;

  --kendo-color-warning: #f09c66;
  --kendo-color-warning-hover: #f3aa7c;
  --kendo-color-warning-active: #f6b791;
  --kendo-color-warning-subtle: #4a2d1a;
  --kendo-color-warning-subtle-hover: #593721;
  --kendo-color-warning-subtle-active: #694228;
  --kendo-color-on-warning: #1a0900;
  --kendo-color-warning-emphasis: #f6b791;
  --kendo-color-warning-on-subtle: #feeadf;
  --kendo-color-warning-on-surface: #f3aa7c;

  --kendo-color-series-a: #6d9cd0;
  --kendo-color-series-b: #9a4e84;
  --kendo-color-series-c: #f46d69;
  --kendo-color-series-d: #5874fb;
  --kendo-color-series-e: #b2c783;
  --kendo-color-series-f: #b3b7c2;

  /*
   * Repaint the shell chrome vars (defined on :root in globals.css) so the
   * drawer follows wizardline's dark .k-drawer: surface #17191f, border =
   * dark --kendo-color-border, and the inactive-item hover reads dark
   * (primary-subtle / primary). The component files are untouched.
   */
  --wiz-surface: #17191f;
  --wiz-border: #858b9952;
  --wiz-primary-subtle: #1c2d3f;
  --wiz-blue: #6d9cd0;
}

/*
 * Dark-mode CHROME, ported from wizardline-app's dark chrome rules. The header,
 * footer, and active nav item in expiration-wizard are painted with INLINE
 * styles (AppHeader.tsx / AppFooter.tsx / SideNav.tsx use WizColors literals),
 * so a plain selector cannot override them — !important is required and is
 * scoped under [data-theme-mode="dark"] so the light-mode chrome is untouched.
 * Each shell renders exactly one <header>, one <footer>, and (manager) one
 * <nav>, so these element selectors are unambiguous.
 */

/* Header appbar — wizardline dark header (#101116 / border #343740 / neutral text). */
[data-theme-mode="dark"] header {
  background-color: #101116 !important;
  border-color: #343740 !important;
  border-bottom-color: #343740 !important;
  color: #f9f9f9 !important;
}

[data-theme-mode="dark"] header h1,
[data-theme-mode="dark"] header a,
[data-theme-mode="dark"] header button,
[data-theme-mode="dark"] header span {
  color: #f9f9f9 !important;
}

/* Footer appbar — wizardline dark footer (#101116 / border #343740 / neutral text). */
[data-theme-mode="dark"] footer {
  background-color: #101116 !important;
  border-color: #343740 !important;
  border-top-color: #343740 !important;
  color: #f9f9f9 !important;
}

[data-theme-mode="dark"] footer a {
  color: #f9f9f9 !important;
}

/*
 * Selected drawer item — wizardline dark .k-drawer-item.k-selected. The active
 * item's purple/off-white/red is set inline in SideNav.tsx keyed off
 * aria-current="page", so override via that stable hook with !important.
 */
[data-theme-mode="dark"] nav a[aria-current="page"] {
  color: #ebd8e4 !important;
  background-color: #2c1225 !important;
  box-shadow: inset 3px 0 0 #9a4e84 !important;
}

[data-theme-mode="dark"] nav a:not([aria-current="page"]),
[data-theme-mode="dark"] nav button {
  color: #f4f5f7 !important;
}