/* Import Navigation, Footer, Modal, and Toast styles */
@import "./Navigation.637ba4b0.css";
@import "./MarketingHero.954229e0.css";
@import "./MarketingMobile.5b86fc88.css";
@import "./Footer.77ad0afa.css";
@import "./Modal.90829915.css";
@import "./Toast.61252534.css";
@import "./CanadianBranding.dae00a0e.css";

/* ============================================================
   MISsimulation Design Token Registry
   Single source of truth for all shared values.
   MarketingHero.css owns the --mis-* marketing tokens;
   this file owns the base/shell tokens referenced everywhere.
   ============================================================ */
:root {
  /* --- Brand: Coral (primary CTA / accent) --- */
  --color-coral:         #f45e43;
  --color-coral-dark:    #e54d32;
  --color-coral-darker:  #c73a00;
  --color-coral-deep:    #d94d31;
  --color-coral-shadow:  rgba(244, 94, 67, 0.25);

  /* --- Brand: Navy (secondary / header / footer) --- */
  --color-navy:          #2c3e50;
  --color-navy-dark:     #1a2a3a;
  --color-navy-light:    #34495e;

  /* --- Brand: Indigo (instructor CTA / sign-in) --- */
  --color-indigo:        #4f46e5;
  --color-indigo-dark:   #4338ca;
  --color-indigo-shadow: rgba(79, 70, 229, 0.25);

  /* --- Brand: Student Orange --- */
  --color-student:       #c2410c;
  --color-student-dark:  #9a3412;

  /* --- Semantic status colours --- */
  --color-success:       #198754;
  --color-success-vivid: #27ae60;
  --color-warning:       #ffc107;
  --color-danger:        #dc3545;
  --color-info:          #3498db;
  --color-info-dark:     #2980b9;

  /* --- Neutrals --- */
  --color-white:         #ffffff;
  --color-bg:            #f8f9fa;
  --color-bg-subtle:     #f0f4ff;
  --color-text:          #212529;
  --color-text-secondary:#5a6c7d;
  --color-text-muted:    #475569;
  --color-muted:         #6c757d;
  --color-border:        #dee2e6;
  --color-border-light:  #e1e8ed;
  --color-border-subtle: #e9ecef;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl:  0 10px 40px rgba(0, 0, 0, 0.15);

  /* --- Border radii --- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-full: 50%;

  /* --- Transitions --- */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.3s ease;

  /* --- Layout --- */
  --container-max:    1200px;
  --container-pad:    20px;
  --nav-height:       70px;
  --nav-height-mobile:60px;

  /* --- Typography --- */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* --- Marketing (merged from MarketingHero.css) --- */
  --mis-indigo:         #4f46e5;
  --mis-indigo-dark:    #4338ca;
  --mis-indigo-deep:    #312e81;
  --mis-indigo-light:   #eef2ff;
  --mis-indigo-border:  #c7d2fe;
  --mis-indigo-tint:    #e0e7ff;
  --mis-green:          #047857;
  --mis-green-dark:     #065f46;
  --mis-sky:            #0369a1;
  --mis-sky-dark:       #0c4a6e;
  --mis-sky-light:      #f0f9ff;
  --mis-sky-border:     #bae6fd;
  --mis-slate-900:      #0f172a;
  --mis-slate-800:      #1e293b;
  --mis-slate-700:      #334155;
  --mis-slate-600:      #475569;
  --mis-slate-500:      #64748b;
  --mis-lavender-bg:    #f0f4ff;
  --mis-snow-bg:        #fafbff;
  --mis-page-bg:        #f8faff;
  --mis-gold:           #fbbf24;
  --mis-gold-dark:      #b45309;
  --mis-student-orange: #c2410c;
  --mis-navy-gradient:  linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);

  /* --- Country/Region --- */
  --color-canada-red:   #c41e3a;

  /* --- Legacy Bootstrap-compat aliases (avoids regressions) --- */
  --primary-color:   var(--color-indigo);
  --secondary-color: var(--color-navy);
  --light-color:     var(--color-bg);
  --dark-color:      var(--color-text);
  --text-color:      var(--color-text);
  --text-light:      var(--color-muted);
  --border-color:    var(--color-border);
  --danger-color:    var(--color-danger);
  --warning-color:   var(--color-warning);
  --success-color:   var(--color-success);

  /* Override Bootstrap muted/secondary text to be dark and readable */
  --bs-secondary-color: #1a1a1a;
  --bs-body-color: #1a1a1a;
}

/* Dark Mode — triggered by `data-theme="dark"` on <html> (manual toggle),
   or by `prefers-color-scheme: dark` when the user hasn't picked a theme.
   An explicit `data-theme="light"` on <html> wins over the system preference. */

/* Explicit dark mode (overrides system preference). */
:root[data-theme="dark"] {
    /* --- Brand: Coral --- */
    --color-coral:         #f45e43;
    --color-coral-dark:    #e54d32;
    --color-coral-darker:  #c73a00;
    --color-coral-deep:    #d94d31;
    --color-coral-shadow:  rgba(244, 94, 67, 0.4);

    /* --- Brand: Navy --- */
    --color-navy:          #34495e;
    --color-navy-dark:     #2c3e50;
    --color-navy-light:    #465c71;

    /* --- Brand: Indigo --- */
    --color-indigo:        #6366f1;
    --color-indigo-dark:   #4f46e5;
    --color-indigo-shadow: rgba(99, 102, 241, 0.4);

    /* --- Brand: Student Orange --- */
    --color-student:       #c2410c;
    --color-student-dark:  #9a3412;

    /* --- Semantic status colours --- */
    --color-success:       #22c55e;
    --color-success-vivid: #27ae60;
    --color-warning:       #fbbf24;
    --color-danger:        #ef4444;
    --color-info:          #38bdf8;
    --color-info-dark:     #0ea5e9;

    /* --- Neutrals --- */
    --color-white:         #1e293b;
    --color-bg:            #0f172a;
    --color-bg-subtle:     #1e1b4b;
    --color-text:          #f1f5f9;
    --color-text-primary:  #f1f5f9;
    --color-text-secondary:#cbd5e1;
    --color-text-muted:    #f8fafc;
    --color-muted:         #cbd5e1;
    --color-background:    #0f172a;
    --color-border:        #334155;
    --color-border-light:  #475569;
    --color-border-subtle: #1e293b;

    /* --- Shadows --- */
    --shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl:  0 10px 40px rgba(0, 0, 0, 0.7);

    /* --- Marketing dark variants --- */
    --mis-indigo:         #6366f1;
    --mis-indigo-dark:    #4f46e5;
    --mis-indigo-deep:    #4338ca;
    --mis-indigo-light:   #312e81;
    --mis-indigo-border:  #4f46e5;
    --mis-indigo-tint:    #3730a3;
    --mis-slate-900:      #f8fafc;
    --mis-slate-800:      #f1f5f9;
    --mis-slate-700:      #e2e8f0;
    --mis-slate-600:      #cbd5e1;
    --mis-slate-500:      #cbd5e1;
    --mis-lavender-bg:    #1e1b4b;
    --mis-snow-bg:        #0f172a;
    --mis-page-bg:        #0c1220;
    --mis-navy-gradient:  linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

    color-scheme: dark;
}

/* System dark mode, unless the user explicitly chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* --- Brand: Coral --- */
    --color-coral:         #f45e43;
    --color-coral-dark:    #e54d32;
    --color-coral-darker:  #c73a00;
    --color-coral-deep:    #d94d31;
    --color-coral-shadow:  rgba(244, 94, 67, 0.4);

    /* --- Brand: Navy --- */
    --color-navy:          #34495e;
    --color-navy-dark:     #2c3e50;
    --color-navy-light:    #465c71;

    /* --- Brand: Indigo --- */
    --color-indigo:        #6366f1;
    --color-indigo-dark:   #4f46e5;
    --color-indigo-shadow: rgba(99, 102, 241, 0.4);

    /* --- Brand: Student Orange --- */
    --color-student:       #c2410c;
    --color-student-dark:  #9a3412;

    /* --- Semantic status colours --- */
    --color-success:       #22c55e;
    --color-success-vivid: #27ae60;
    --color-warning:       #fbbf24;
    --color-danger:        #ef4444;
    --color-info:          #38bdf8;
    --color-info-dark:     #0ea5e9;

    /* --- Neutrals --- */
    --color-white:         #1e293b;
    --color-bg:            #0f172a;
    --color-bg-subtle:     #1e1b4b;
    --color-text:          #f1f5f9;
    --color-text-primary:  #f1f5f9;
    --color-text-secondary:#cbd5e1;
    --color-text-muted:    #f8fafc;
    --color-muted:         #cbd5e1;
    --color-background:    #0f172a;
    --color-border:        #334155;
    --color-border-light:  #475569;
    --color-border-subtle: #1e293b;

    /* --- Shadows --- */
    --shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl:  0 10px 40px rgba(0, 0, 0, 0.7);

    /* --- Marketing dark variants --- */
    --mis-indigo:         #6366f1;
    --mis-indigo-dark:    #4f46e5;
    --mis-indigo-deep:    #4338ca;
    --mis-indigo-light:   #312e81;
    --mis-indigo-border:  #4f46e5;
    --mis-indigo-tint:    #3730a3;
    --mis-slate-900:      #f8fafc;
    --mis-slate-800:      #f1f5f9;
    --mis-slate-700:      #e2e8f0;
    --mis-slate-600:      #cbd5e1;
    --mis-slate-500:      #cbd5e1;
    --mis-lavender-bg:    #1e1b4b;
    --mis-snow-bg:        #0f172a;
    --mis-page-bg:        #0c1220;
    --mis-navy-gradient:  linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

    color-scheme: dark;
  }
}

/* Light mode: also set color-scheme so native form controls / scrollbars
   match the chosen theme. */
:root[data-theme="light"] {
  color-scheme: light;
}

/* ============================================================
   Bootstrap utility class dark-mode overrides
   These classes are used throughout JSX components (not inline
   styles), so they need explicit dark-mode selectors.
   ============================================================ */

:root[data-theme="dark"] .bg-white {
  background-color: var(--color-white) !important;
}

:root[data-theme="dark"] .text-dark {
  color: var(--color-text) !important;
}

:root[data-theme="dark"] .bg-light {
  background-color: var(--color-bg) !important;
}

:root[data-theme="dark"] .text-muted {
  color: var(--color-muted) !important;
}

:root[data-theme="dark"] .text-secondary {
  color: var(--color-text-secondary) !important;
}

:root[data-theme="dark"] .border {
  border-color: var(--color-border) !important;
}

:root[data-theme="dark"] .border-light {
  border-color: var(--color-border-light) !important;
}

/* ============================================================
   Dark-mode overrides for inline-styled elements.
   The marketing pages set backgrounds and text colors via inline
   `style="..."` attributes. CSS variables in those values would
   auto-switch, but several legacy inline styles hardcode light hex
   colors. These rules use `!important` to override those inline
   styles only when dark mode is active.
   ============================================================ */

/* Specific overrides for common white backgrounds in dark mode */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] [class*="bg-white"] {
  background-color: var(--color-white) !important;
}

:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#fff"] {
  background-color: var(--color-white) !important;
}

:root[data-theme="dark"] [style*="background: rgb(255"] {
  background-color: var(--color-white) !important;
}

/* Improve text contrast for specific text classes in dark mode */
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-secondary,
:root[data-theme="dark"] .text-dark {
  color: var(--color-text) !important;
}

/* Mobile menu follows theme — light ink on dark panel. */
:root[data-theme="dark"] #offcanvasNavbar .text-muted,
:root[data-theme="dark"] #offcanvasNavbar .text-secondary,
:root[data-theme="dark"] #offcanvasNavbar .text-dark {
  color: #f1f5f9 !important;
}

/* When dark mode is on, force all .flow-section backgrounds to a dark
   surface so any hardcoded `style="background: #f8faff"` etc. is
   visually overridden. */
:root[data-theme="dark"] .flow-section,
:root:not([data-theme="light"]):not([data-theme="dark"]) .flow-section {
  background-color: var(--mis-snow-bg) !important;
  color: var(--color-text) !important;
}

/* Generic light background overrides via attribute selector.
   These target the most common hardcoded light hex values used in
   inline styles across the marketing pages. */
:root[data-theme="dark"] [style*="background: #f8faff"],
:root[data-theme="dark"] [style*="background:#f8faff"],
:root[data-theme="dark"] [style*="background: #fafaf8"],
:root[data-theme="dark"] [style*="background:#fafaf8"],
:root[data-theme="dark"] [style*="background: #f8f9fa"],
:root[data-theme="dark"] [style*="background:#f8f9fa"],
:root[data-theme="dark"] [style*="background: #fafafa"],
:root[data-theme="dark"] [style*="background:#fafafa"],
:root[data-theme="dark"] [style*="background: #f0f4ff"],
:root[data-theme="dark"] [style*="background:#f0f4ff"],
:root[data-theme="dark"] [style*="background: #f8fafc"],
:root[data-theme="dark"] [style*="background:#f8fafc"],
:root[data-theme="dark"] [style*="background: #e0e7ff"],
:root[data-theme="dark"] [style*="background:#e0e7ff"],
:root[data-theme="dark"] [style*="background: #e2e8f0"],
:root[data-theme="dark"] [style*="background:#e2e8f0"] {
  background: var(--mis-snow-bg) !important;
}

/* White cards / chips / panels → dark surface */
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background:white"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #ffffff"],
:root[data-theme="dark"] [style*="background:#ffffff"],
:root[data-theme="dark"] [style*="background: white;"],
:root[data-theme="dark"] [style*="background:white;"] {
  background-color: var(--color-white) !important;
}

/* More specific inline style matches for case study cards */
:root[data-theme="dark"] [style*="background: white; padding: 2rem"],
:root[data-theme="dark"] [style*="background: white; padding: 2.5rem"],
:root[data-theme="dark"] [style*="background: white; border-radius"],
:root[data-theme="dark"] [style*="background: white; border: 1px solid"] {
  background-color: var(--color-white) !important;
}

/* Strategy and application cards from case studies (inline styles) */
:root[data-theme="dark"] .strategy-card,
:root[data-theme="dark"] .application-card {
  background: var(--color-white) !important;
  border-color: var(--color-border) !important;
}

/* Embedded component dark mode overrides */
:root[data-theme="dark"] .nb-registration-host,
:root[data-theme="dark"] .nb-magic-link-host {
  --nb-field-bg: #1e293b !important;
  --nb-text-color: #f1f5f9 !important;
  --nb-label-color: #94a3b8 !important;
  --nb-muted-color: #64748b !important;
  --nb-field-border-color: rgba(148, 163, 184, 0.3) !important;
}

/* Placeholder text in embedded components */
:root[data-theme="dark"] .nb-registration-host input::placeholder,
:root[data-theme="dark"] .nb-registration-host textarea::placeholder,
:root[data-theme="dark"] .nb-magic-link-host input::placeholder,
:root[data-theme="dark"] .nb-magic-link-host textarea::placeholder {
  color: rgba(148, 163, 184, 0.7) !important;
  opacity: 1;
}

/* Force all white backgrounds in embedded components to dark */
:root[data-theme="dark"] .nb-registration-host [style*="background: white"],
:root[data-theme="dark"] .nb-registration-host [style*="background:#ffffff"],
:root[data-theme="dark"] .nb-magic-link-host [style*="background: white"],
:root[data-theme="dark"] .nb-magic-link-host [style*="background:#ffffff"] {
  background-color: #1e293b !important;
}

:root[data-theme="dark"] .nb-registration-host .login-card,
:root[data-theme="dark"] .nb-registration-host .registration-form-unified,
:root[data-theme="dark"] .nb-registration-host .checkbox-label-simple,
:root[data-theme="dark"] .nb-registration-host .checkbox-label-inline,
:root[data-theme="dark"] .nb-registration-host .terms-gate-simple,
:root[data-theme="dark"] .nb-registration-host .social-button,
:root[data-theme="dark"] .nb-registration-host .section-divider span,
:root[data-theme="dark"] .nb-registration-host .paypal-status--error,
:root[data-theme="dark"] .nb-registration-host .receipt-container,
:root[data-theme="dark"] .nb-registration-host .error-message,
:root[data-theme="dark"] .nb-registration-host .disabled-helper-text {
  background: #1e293b !important;
}

:root[data-theme="dark"] .nb-magic-link-host .login-card,
:root[data-theme="dark"] .nb-magic-link-host .social-button {
  background: #1e293b !important;
}

:root[data-theme="dark"] .step-item {
  background: var(--color-white) !important;
  border-color: var(--color-border) !important;
}

/* Case study brand-name pills
   Brand-colored company names sit on a consistent surface so they
   remain readable in both light and dark mode. */
.case-card .card-title > span:first-child {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 1.3;
}

:root[data-theme="dark"] .case-card .card-title > span:first-child {
  background: rgba(51, 65, 85, 0.6);
  border-color: rgba(148, 163, 184, 0.2);
}

/* Trump Harris case study cards */
:root[data-theme="dark"] .voter-card,
:root[data-theme="dark"] .policy-card {
  background: var(--color-white) !important;
  border-color: var(--color-border) !important;
}

/* Demo tour page cards */
:root[data-theme="dark"] [style*="background: white; border: 1px solid #e9d5ff"],
:root[data-theme="dark"] [style*="background: white; border: 1px solid #d1fae5"] {
  background: var(--color-white) !important;
  border-color: var(--color-border) !important;
}

/* Light borders → dark borders on cards/panels */
:root[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
:root[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
:root[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
:root[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
:root[data-theme="dark"] [style*="border: 1px solid #e0e7ff"],
:root[data-theme="dark"] [style*="border:1px solid #e0e7ff"],
:root[data-theme="dark"] [style*="border: 1px solid #f1f5f9"],
:root[data-theme="dark"] [style*="border:1px solid #f1f5f9"] {
  border-color: var(--color-border-light) !important;
}

/* Dark text on light cards (chip text, badge text) → light text */
:root[data-theme="dark"] [style*="color: #334155"],
:root[data-theme="dark"] [style*="color:#334155"],
:root[data-theme="dark"] [style*="color: #374151"],
:root[data-theme="dark"] [style*="color:#374151"],
:root[data-theme="dark"] [style*="color: #5a6c7d"],
:root[data-theme="dark"] [style*="color:#5a6c7d"],
:root[data-theme="dark"] [style*="color: #475569"],
:root[data-theme="dark"] [style*="color:#475569"] {
  color: var(--color-text-secondary) !important;
}

/* Mid-gray labels on light backgrounds → light slate on dark */
:root[data-theme="dark"] [style*="color: #94a3b8"],
:root[data-theme="dark"] [style*="color:#94a3b8"],
:root[data-theme="dark"] [style*="color: #64748b"],
:root[data-theme="dark"] [style*="color:#64748b"],
:root[data-theme="dark"] [style*="color: #6b7280"],
:root[data-theme="dark"] [style*="color:#6b7280"],
:root[data-theme="dark"] [style*="color: #7f8c8d"],
:root[data-theme="dark"] [style*="color:#7f8c8d"] {
  color: var(--color-text-muted) !important;
}

/* Page-level table/panel that was hardcoded white */
:root[data-theme="dark"] table[style*="background: white"],
:root[data-theme="dark"] table[style*="background:white"],
:root[data-theme="dark"] table[style*="background: #fff"],
:root[data-theme="dark"] table[style*="background:#fff"] {
  background-color: var(--color-white) !important;
  color: var(--color-text) !important;
}

/* Drop shadows look harsh in dark mode; soften the default inline
   shadows so cards don't have a hard black halo on a dark bg. */
:root[data-theme="dark"] [style*="box-shadow: 0 4px 16px rgba(0,0,0,0.08)"],
:root[data-theme="dark"] [style*="box-shadow:0 4px 16px rgba(0,0,0,0.08)"],
:root[data-theme="dark"] [style*="box-shadow: 0 1px 3px rgba(0,0,0,0.05)"],
:root[data-theme="dark"] [style*="box-shadow:0 1px 3px rgba(0,0,0,0.05)"],
:root[data-theme="dark"] [style*="box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05)"],
:root[data-theme="dark"] [style*="box-shadow:0 1px 3px rgba(0, 0, 0, 0.05)"] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Pastel-tinted backgrounds used for status/feature callouts.
   These stay colored (not gray) in dark mode, just lifted. */
:root[data-theme="dark"] [style*="background: #f0fdf4"],
:root[data-theme="dark"] [style*="background:#f0fdf4"],
:root[data-theme="dark"] [style*="background: #ecfeff"],
:root[data-theme="dark"] [style*="background:#ecfeff"],
:root[data-theme="dark"] [style*="background: #f0fdfa"],
:root[data-theme="dark"] [style*="background:#f0fdfa"],
:root[data-theme="dark"] [style*="background: #f0f9ff"],
:root[data-theme="dark"] [style*="background:#f0f9ff"],
:root[data-theme="dark"] [style*="background: #fee2e2"],
:root[data-theme="dark"] [style*="background:#fee2e2"],
:root[data-theme="dark"] [style*="background: #fef3c7"],
:root[data-theme="dark"] [style*="background:#fef3c7"],
:root[data-theme="dark"] [style*="background: #dbeafe"],
:root[data-theme="dark"] [style*="background:#dbeafe"],
:root[data-theme="dark"] [style*="background: #e0e7ff"],
:root[data-theme="dark"] [style*="background:#e0e7ff"],
:root[data-theme="dark"] [style*="background: #fff8f0"],
:root[data-theme="dark"] [style*="background:#fff8f0"],
:root[data-theme="dark"] [style*="background: #e6fffa"],
:root[data-theme="dark"] [style*="background:#e6fffa"],
:root[data-theme="dark"] [style*="background: #fefce8"],
:root[data-theme="dark"] [style*="background:#fefce8"],
:root[data-theme="dark"] [style*="background: #fdf4ff"],
:root[data-theme="dark"] [style*="background:#fdf4ff"],
:root[data-theme="dark"] [style*="background: #fff7ed"],
:root[data-theme="dark"] [style*="background:#fff7ed"],
:root[data-theme="dark"] [style*="background: #eff6ff"],
:root[data-theme="dark"] [style*="background:#eff6ff"],
:root[data-theme="dark"] [style*="background: #faf5ff"],
:root[data-theme="dark"] [style*="background:#faf5ff"],
:root[data-theme="dark"] [style*="background: #f0f4ff"],
:root[data-theme="dark"] [style*="background:#f0f4ff"],
:root[data-theme="dark"] [style*="background: #f8fffb"],
:root[data-theme="dark"] [style*="background:#f8fffb"],
:root[data-theme="dark"] [style*="background: #fffbeb"],
:root[data-theme="dark"] [style*="background:#fffbeb"],
:root[data-theme="dark"] [style*="background: #d1e7dd"],
:root[data-theme="dark"] [style*="background:#d1e7dd"] {
  /* In dark mode, push these pastels to a much darker, slightly
     desaturated tone so the text on top stays readable. We darken
     them ~80% rather than removing the tint. */
  background-color: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

/* Linear gradients with light hex stops. Many of the marketing
   sections use gradients like "linear-gradient(135deg, #f0fdf4 0%,
   #ecfeff 100%)". Replace those with a dark gradient. */
:root[data-theme="dark"] [style*="linear-gradient"][style*="#f0fdf4"],
:root[data-theme="dark"] [style*="linear-gradient"][style*="#f0f9ff"],
:root[data-theme="dark"] [style*="linear-gradient"][style*="#ecfeff"],
:root[data-theme="dark"] [style*="linear-gradient"][style*="#f0fdfa"],
:root[data-theme="dark"] [style*="linear-gradient"][style*="#e0e7ff"],
:root[data-theme="dark"] [style*="linear-gradient"][style*="#f8faff"],
:root[data-theme="dark"] [style*="linear-gradient"][style*="#f8fafc"],
:root[data-theme="dark"] [style*="linear-gradient"][style*="#fafaf8"],
:root[data-theme="dark"] [style*="linear-gradient"][style*="#fafafa"],
:root[data-theme="dark"] [style*="linear-gradient"][style*="#f8f9fa"],
:root[data-theme="dark"] [style*="linear-gradient"][style*="#fff8f0"] {
  background: var(--mis-snow-bg) !important;
  background-image: none !important;
}

/* Headings that are faded in dark mode because they were styled
   as light-colored text on light backgrounds. Force a readable
   text color for any element that uses one of the pastels above
   as its background. */
:root[data-theme="dark"] [style*="color: #1e40af"],
:root[data-theme="dark"] [style*="color:#1e40af"],
:root[data-theme="dark"] [style*="color: #1e3a5f"],
:root[data-theme="dark"] [style*="color:#1e3a5f"] {
  color: #93c5fd !important;
}
:root[data-theme="dark"] [style*="color: #065f46"],
:root[data-theme="dark"] [style*="color:#065f46"],
:root[data-theme="dark"] [style*="color: #047857"],
:root[data-theme="dark"] [style*="color:#047857"] {
  color: #6ee7b7 !important;
}
:root[data-theme="dark"] [style*="color: #92400e"],
:root[data-theme="dark"] [style*="color:#92400e"] {
  color: #fde68a !important;
}
:root[data-theme="dark"] [style*="color: #b45309"],
:root[data-theme="dark"] [style*="color:#b45309"],
:root[data-theme="dark"] [style*="color: #92400e"] {
  color: #fde68a !important;
}
:root[data-theme="dark"] [style*="color: #166534"],
:root[data-theme="dark"] [style*="color:#166534"] {
  color: #86efac !important;
}
:root[data-theme="dark"] [style*="color: #991b1b"],
:root[data-theme="dark"] [style*="color:#991b1b"] {
  color: #fca5a5 !important;
}
:root[data-theme="dark"] [style*="color: #075985"],
:root[data-theme="dark"] [style*="color:#075985"],
:root[data-theme="dark"] [style*="color: #0369a1"],
:root[data-theme="dark"] [style*="color:#0369a1"],
:root[data-theme="dark"] [style*="color: #0e7490"],
:root[data-theme="dark"] [style*="color:#0e7490"] {
  color: #7dd3fc !important;
}

/* ============================================================
   Additional inline text colours (Bloom's taxonomy, etc.)
   ============================================================ */
:root[data-theme="dark"] [style*="color: #2563eb"],
:root[data-theme="dark"] [style*="color:#2563eb"] {
  color: #60a5fa !important;
}
:root[data-theme="dark"] [style*="color: #dc2626"],
:root[data-theme="dark"] [style*="color:#dc2626"] {
  color: #f87171 !important;
}

:root[data-theme="dark"] [style*="color: #7c3aed"],
:root[data-theme="dark"] [style*="color:#7c3aed"] {
  color: #c4b5fd !important;
}

:root[data-theme="dark"] [style*="color: #059669"],
:root[data-theme="dark"] [style*="color:#059669"] {
  color: #6ee7b7 !important;
}

:root[data-theme="dark"] [style*="color: #ea580c"],
:root[data-theme="dark"] [style*="color:#ea580c"] {
  color: #fdba74 !important;
}

:root[data-theme="dark"] [style*="color: #6366f1"],
:root[data-theme="dark"] [style*="color:#6366f1"] {
  color: #a5b4fc !important;
}

:root[data-theme="dark"] [style*="color: #6f42c1"],
:root[data-theme="dark"] [style*="color:#6f42c1"] {
  color: #d8b4fe !important;
}

/* Case-study brand colours that are too dark for dark mode */
:root[data-theme="dark"] [style*="color: #351C15"],
:root[data-theme="dark"] [style*="color:#351C15"] {
  color: #c49a7a !important;
}

:root[data-theme="dark"] [style*="color: #006241"],
:root[data-theme="dark"] [style*="color:#006241"] {
  color: #34d399 !important;
}

:root[data-theme="dark"] [style*="color: #0B27A3"],
:root[data-theme="dark"] [style*="color:#0B27A3"] {
  color: #60a5fa !important;
}

:root[data-theme="dark"] [style*="color: #000000"],
:root[data-theme="dark"] [style*="color:#000000"] {
  color: #e2e8f0 !important;
}

:root[data-theme="dark"] [style*="color: #495057"],
:root[data-theme="dark"] [style*="color:#495057"] {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] [style*="color: #6c757d"],
:root[data-theme="dark"] [style*="color:#6c757d"] {
  color: #94a3b8 !important;
}

/* ============================================================
   Blog heading inline colors (blog_structure.tsx)
   ============================================================ */
:root[data-theme="dark"] [style*="color: #343a40"],
:root[data-theme="dark"] [style*="color:#343a40"] {
  color: var(--color-text) !important;
}

:root[data-theme="dark"] [style*="color: #28a745"],
:root[data-theme="dark"] [style*="color:#28a745"] {
  color: #86efac !important;
}

:root[data-theme="dark"] [style*="color: #856404"],
:root[data-theme="dark"] [style*="color:#856404"] {
  color: #fde68a !important;
}

:root[data-theme="dark"] [style*="color: #1976d2"],
:root[data-theme="dark"] [style*="color:#1976d2"] {
  color: #93c5fd !important;
}

:root[data-theme="dark"] [style*="color: #7b1fa2"],
:root[data-theme="dark"] [style*="color:#7b1fa2"] {
  color: #d8b4fe !important;
}

:root[data-theme="dark"] [style*="color: #f57c00"],
:root[data-theme="dark"] [style*="color:#f57c00"] {
  color: #fdba74 !important;
}

:root[data-theme="dark"] [style*="color: #388e3c"],
:root[data-theme="dark"] [style*="color:#388e3c"] {
  color: #86efac !important;
}

/* Blog feature-highlight gradient backgrounds */
:root[data-theme="dark"] [style*="background: linear-gradient(135deg, #e8f5e8"],
:root[data-theme="dark"] [style*="background: linear-gradient(135deg, #d4edda"],
:root[data-theme="dark"] [style*="background: linear-gradient(135deg, #fff3cd"],
:root[data-theme="dark"] [style*="background: linear-gradient(135deg, #e3f2fd"],
:root[data-theme="dark"] [style*="background: linear-gradient(135deg, #f3e5f5"],
:root[data-theme="dark"] [style*="background: linear-gradient(135deg, #fff3e0"],
:root[data-theme="dark"] [style*="background: linear-gradient(135deg, #e8f5e8"],
:root[data-theme="dark"] [style*="background-color: #f8f9fa"] {
  background: var(--color-white) !important;
  border-color: var(--color-border) !important;
}

/* Blog border-bottom colors */
:root[data-theme="dark"] [style*="border-bottom: 2px solid #6c757d"] {
  border-bottom-color: var(--color-border-light) !important;
}

/* ============================================================
   Bootstrap card dark mode (blog breadcrumb nav-band)
   ============================================================ */
:root[data-theme="dark"] .card {
  background-color: var(--color-white) !important;
  border-color: var(--color-border) !important;
}

:root[data-theme="dark"] .card-body {
  background-color: var(--color-white) !important;
  color: var(--color-text) !important;
}

/* ============================================================
   Bootstrap accordion dark mode (FAQ sections)
   ============================================================ */
:root[data-theme="dark"] .accordion-item {
  background-color: var(--color-white) !important;
  border-color: var(--color-border) !important;
}

:root[data-theme="dark"] .accordion-button {
  background-color: var(--color-white) !important;
  color: var(--color-text) !important;
}

:root[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--color-bg-subtle) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(1.5) !important;
}

:root[data-theme="dark"] .accordion-body {
  background-color: var(--color-white) !important;
  color: var(--color-text) !important;
}

:root[data-theme="dark"] .accordion-collapse {
  background-color: var(--color-white) !important;
}

/* ============================================================
   Bootstrap alert dark mode
   ============================================================ */
:root[data-theme="dark"] .alert {
  background-color: var(--color-white) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

:root[data-theme="dark"] .alert-light {
  background-color: var(--color-white) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

:root[data-theme="dark"] .alert-heading {
  color: var(--color-text) !important;
}

/* ============================================================
   Bootstrap list-group dark mode
   ============================================================ */
:root[data-theme="dark"] .list-group-item {
  background-color: var(--color-white) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* ============================================================
   Bootstrap btn-outline dark mode
   ============================================================ */
:root[data-theme="dark"] .btn-outline-primary {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

:root[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

/* ============================================================
   Comprehensive Bootstrap table dark mode
   ============================================================ */
:root[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--color-white) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

:root[data-theme="dark"] .table thead > * > * {
  background-color: var(--color-bg-subtle) !important;
  color: var(--color-text) !important;
}

:root[data-theme="dark"] .table-bordered > :not(caption) > * {
  border-color: var(--color-border) !important;
}

/* Green borders that vanish on dark backgrounds */
:root[data-theme="dark"] [style*="border: 1px solid #a7f3d0"],
:root[data-theme="dark"] [style*="border:1px solid #a7f3d0"],
:root[data-theme="dark"] [style*="border: 1px solid #bbf7d0"],
:root[data-theme="dark"] [style*="border:1px solid #bbf7d0"],
:root[data-theme="dark"] [style*="border: 1px solid #d1fae5"],
:root[data-theme="dark"] [style*="border:1px solid #d1fae5"] {
  border-color: rgba(52, 211, 153, 0.35) !important;
}

/* Row backgrounds that use 'background:' shorthand with white */
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background:white"] {
  background: var(--color-white) !important;
}

/* Row borders that use light green/blue */
:root[data-theme="dark"] [style*="border-bottom: 1px solid #d1fae5"],
:root[data-theme="dark"] [style*="border-bottom:1px solid #d1fae5"] {
  border-bottom-color: var(--color-border) !important;
}

/* Additional light backgrounds for blog and instructor sections */
:root[data-theme="dark"] [style*="background: #eff6ff"],
:root[data-theme="dark"] [style*="background:#eff6ff"],
:root[data-theme="dark"] [style*="background: #faf5ff"],
:root[data-theme="dark"] [style*="background:#faf5ff"],
:root[data-theme="dark"] [style*="background: #fff7ed"],
:root[data-theme="dark"] [style*="background:#fff7ed"],
:root[data-theme="dark"] [style*="background: #f0fdf4"],
:root[data-theme="dark"] [style*="background:#f0fdf4"],
:root[data-theme="dark"] [style*="background: #dbeafe"],
:root[data-theme="dark"] [style*="background:#dbeafe"] {
  background: var(--color-white) !important;
}

/* Light borders for blog and instructor sections */
:root[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
:root[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
:root[data-theme="dark"] [style*="border: 1px solid #d1d5db"],
:root[data-theme="dark"] [style*="border:1px solid #d1d5db"],
:root[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
:root[data-theme="dark"] [style*="border:1px solid #e2e8f0"] {
  border-color: var(--color-border) !important;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Default to light color-scheme so native form controls / scrollbars
   match the chosen theme. The dark-mode blocks below override this when
   data-theme="dark" is set on <html>. */
html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Utility classes */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.text-center {
  text-align: center;
}