/**
 * PowerForecast design tokens (same as PowerSolver's css/theme.css) — the one place where colours, type, spacing, radii and shadows are defined.
 *
 * Two themes, chosen with <html data-theme="violet|amber"> (js/theme.js sets it before the page paints):
 *   violet  Theme A — Midnight + Violet (default)
 *   amber   Theme B — Charcoal + Amber
 * Only the palette changes between themes; every component reads the semantic tokens below (--ps-*), never a raw
 * colour. The older variable names (--wizard-*, --primary-color...) are kept as aliases so existing styles follow.
 */

/* ------------------------------------------------------------------ Theme A: Midnight + Violet (default) */
:root,
[data-theme="violet"] {
    /* palette (reference: #0B0D14 #151826 #2A2540 #8B6CFF #C7B8FF #F5F6FA) */
    --ps-bg: #0b0d14;
    --ps-surface: #151826;
    --ps-surface-raised: #1c2032;
    --ps-surface-selected: #2a2540;
    --ps-border: #272b3e;
    --ps-border-strong: #3a3f57;
    --ps-border-input: #666c8f;          /* form fields: 3:1 against every surface (WCAG 1.4.11) */

    --ps-text: #f5f6fa;
    --ps-text-secondary: #c9ccda;
    --ps-text-muted: #9ea3b8;

    --ps-accent: #8b6cff;
    --ps-accent-rgb: 139, 108, 255;
    --ps-accent-hover: #9d84ff;
    --ps-accent-active: #7a5af0;
    --ps-accent-soft: #c7b8ff;
    --ps-accent-text: #9d84ff;           /* accent as text or icon: 4.5:1 on every surface */
    --ps-on-accent: #0b0d14;

    --ps-logo-main: #8b6cff;

    --ps-glow: radial-gradient(circle at 20% 0%, rgba(139, 108, 255, 0.10), transparent 55%);
}

/* ------------------------------------------------------------------ Theme B: Charcoal + Amber */
:root[data-theme="amber"] {
    /* palette (reference: #111111 #1B1B1B #2A2A2A #F2B84B #F9E3B2 #F7F7F5) */
    --ps-bg: #111111;
    --ps-surface: #1b1b1b;
    --ps-surface-raised: #222222;
    --ps-surface-selected: #2e2617;
    --ps-border: #2a2a2a;
    --ps-border-strong: #3d3d3d;
    --ps-border-input: #707070;

    --ps-text: #f7f7f5;
    --ps-text-secondary: #d2d2cd;
    --ps-text-muted: #a5a59f;

    --ps-accent: #f2b84b;
    --ps-accent-rgb: 242, 184, 75;
    --ps-accent-hover: #f5c66a;
    --ps-accent-active: #e0a332;
    --ps-accent-soft: #f9e3b2;
    --ps-accent-text: #f2b84b;
    --ps-on-accent: #111111;

    /* the warning yellow would read as the accent here: orange keeps "worth a look" distinct */
    --ps-warning: #fb923c;
    --ps-warning-rgb: 251, 146, 60;

    --ps-logo-main: #f2b84b;

    --ps-glow: radial-gradient(circle at 20% 0%, rgba(242, 184, 75, 0.07), transparent 55%);
}

/* ------------------------------------------------------------------ shared by both themes */
:root {
    /* accent tints, derived (hover rows, selected chips, focus ring) */
    --ps-accent-subtle: rgba(var(--ps-accent-rgb), 0.12);
    --ps-accent-muted: rgba(var(--ps-accent-rgb), 0.24);
    --ps-focus-ring: 0 0 0 3px rgba(var(--ps-accent-rgb), 0.35);

    /* status (same in both themes; readable on the dark surfaces) */
    --ps-success: #34d399;
    --ps-success-rgb: 52, 211, 153;
    --ps-warning: #fbbf24;
    --ps-warning-rgb: 251, 191, 36;
    --ps-danger: #f87171;
    --ps-danger-rgb: 248, 113, 113;
    --ps-info: #7dd3fc;
    --ps-info-rgb: 125, 211, 252;

    /* disabled */
    --ps-disabled-bg: var(--ps-surface-raised);
    --ps-disabled-text: var(--ps-text-muted);
    --ps-disabled-opacity: 0.55;

    /* typography (reference: Plus Jakarta Sans — SemiBold/Bold headings, Regular/Medium UI and body) */
    --ps-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ps-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ps-weight-regular: 400;
    --ps-weight-medium: 500;
    --ps-weight-semibold: 600;
    --ps-weight-bold: 700;
    --ps-text-xs: 0.75rem;
    --ps-text-sm: 0.875rem;
    --ps-text-md: 1rem;
    --ps-text-lg: 1.25rem;
    --ps-text-xl: 1.75rem;
    --ps-text-2xl: 2.25rem;

    /* spacing (4 px grid), radii, shadows, motion */
    --ps-space-1: 0.25rem;
    --ps-space-2: 0.5rem;
    --ps-space-3: 0.75rem;
    --ps-space-4: 1rem;
    --ps-space-5: 1.5rem;
    --ps-space-6: 2rem;
    --ps-radius-sm: 6px;
    --ps-radius-md: 10px;
    --ps-radius-lg: 14px;
    --ps-radius-pill: 999px;
    --ps-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --ps-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --ps-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
    --ps-transition: 150ms ease;
    --ps-icon-stroke: 1.5;

    /* ---- aliases: existing names, now reading the tokens (wizard.css, styles.css, inline styles) */
    --wizard-primary: var(--ps-accent);
    --wizard-primary-dark: var(--ps-accent-active);
    --wizard-secondary: var(--ps-accent-soft);
    --wizard-accent: var(--ps-accent-soft);
    --wizard-primary-light: var(--ps-accent-subtle);
    --wizard-success: var(--ps-success);
    --wizard-warning: var(--ps-warning);
    --wizard-danger: var(--ps-danger);
    --wizard-bg: var(--ps-bg);
    --wizard-bg-subtle: var(--ps-surface);
    --wizard-surface: var(--ps-surface);
    --wizard-surface-hover: var(--ps-surface-raised);
    --wizard-border: var(--ps-border);
    --wizard-border-hover: var(--ps-border-strong);
    --wizard-text: var(--ps-text);
    --wizard-text-secondary: var(--ps-text-secondary);
    --wizard-text-muted: var(--ps-text-muted);

    --primary-color: var(--ps-accent);
    --primary-dark: var(--ps-accent-active);
    --secondary-color: var(--ps-accent-soft);
    --accent-color: var(--ps-accent-soft);
    --dark-bg: var(--ps-bg);
    --darker-bg: var(--ps-surface);
    --card-bg: var(--ps-surface);
    --card-border: var(--ps-border);
    --text-primary: var(--ps-text);
    --text-secondary: var(--ps-text-secondary);
    --text-muted: var(--ps-text-muted);
    --success-color: var(--ps-success);
    --danger-color: var(--ps-danger);
    --warning-color: var(--ps-warning);
    --info-color: var(--ps-accent-soft);

    /* ---- Bootstrap 5.3, driven by the tokens */
    --bs-body-font-family: var(--ps-font);
    --bs-body-bg: var(--ps-bg);
    --bs-body-color: var(--ps-text);
    --bs-emphasis-color: var(--ps-text);
    --bs-secondary-color: var(--ps-text-secondary);
    --bs-body-secondary-color: var(--ps-text-secondary);
    --bs-tertiary-color: var(--ps-text-muted);
    --bs-border-color: var(--ps-border);
    --bs-secondary-bg: var(--ps-surface-raised);
    --bs-tertiary-bg: var(--ps-surface);
    --bs-primary: var(--ps-accent);
    --bs-primary-rgb: var(--ps-accent-rgb);
    --bs-link-color: var(--ps-accent-soft);
    --bs-link-color-rgb: var(--ps-accent-rgb);
    --bs-link-hover-color: var(--ps-accent);
    --bs-focus-ring-color: rgba(var(--ps-accent-rgb), 0.35);
    --bs-success-rgb: var(--ps-success-rgb);
    --bs-warning-rgb: var(--ps-warning-rgb);
    --bs-danger-rgb: var(--ps-danger-rgb);
    --bs-info-rgb: var(--ps-info-rgb);
}

html { color-scheme: dark; }

body {
    font-family: var(--ps-font);
    background: var(--ps-glow), var(--ps-bg);
    color: var(--ps-text);
}

h1, h2, h3, h4, h5, h6 { font-weight: var(--ps-weight-semibold); }

:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }

/* form fields on every page: an edge that stands out at 3:1 (WCAG 1.4.11) */
.form-control, .form-select, textarea, input[type="text"], input[type="number"], input[type="search"] {
    border-color: var(--ps-border-input);
}
.form-control:focus, .form-select:focus { border-color: var(--ps-accent); box-shadow: var(--ps-focus-ring); }

/* ------------------------------------------------------------------ buttons (all states) */
.btn-primary {
    --bs-btn-color: var(--ps-on-accent);
    --bs-btn-bg: var(--ps-accent);
    --bs-btn-border-color: var(--ps-accent);
    --bs-btn-hover-color: var(--ps-on-accent);
    --bs-btn-hover-bg: var(--ps-accent-hover);
    --bs-btn-hover-border-color: var(--ps-accent-hover);
    --bs-btn-active-color: var(--ps-on-accent);
    --bs-btn-active-bg: var(--ps-accent-active);
    --bs-btn-active-border-color: var(--ps-accent-active);
    --bs-btn-focus-shadow-rgb: var(--ps-accent-rgb);
    --bs-btn-disabled-color: var(--ps-disabled-text);
    --bs-btn-disabled-bg: var(--ps-disabled-bg);
    --bs-btn-disabled-border-color: var(--ps-border);
    font-weight: var(--ps-weight-semibold);
}
.btn-outline-primary {
    --bs-btn-color: var(--ps-accent-soft);
    --bs-btn-border-color: rgba(var(--ps-accent-rgb), 0.6);
    --bs-btn-hover-color: var(--ps-on-accent);
    --bs-btn-hover-bg: var(--ps-accent);
    --bs-btn-hover-border-color: var(--ps-accent);
    --bs-btn-active-color: var(--ps-on-accent);
    --bs-btn-active-bg: var(--ps-accent-active);
    --bs-btn-active-border-color: var(--ps-accent-active);
    --bs-btn-focus-shadow-rgb: var(--ps-accent-rgb);
    --bs-btn-disabled-color: var(--ps-disabled-text);
    --bs-btn-disabled-border-color: var(--ps-border);
}

/* ================================================================== components shared by every page
   (wizard, Results, Compare...): forms, buttons, Bootstrap components, dialogs. Page-specific parts stay in
   css/wizard.css, css/result-pages.css, styles.css. */

/* ============================================================
   Form Controls
   ============================================================ */
.form-control,
.form-select {
    background-color: var(--ps-bg);
    border: 1px solid var(--ps-border-input);
    border-radius: var(--ps-radius-sm);
    color: var(--ps-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--ps-bg);
    border-color: var(--ps-accent);
    color: var(--ps-text);
    box-shadow: var(--ps-focus-ring);
}

.form-control::placeholder {
    color: var(--ps-text-muted);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--ps-disabled-bg);
    color: var(--ps-disabled-text);
    opacity: 0.7;
}

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--ps-danger); }
.invalid-feedback { color: var(--ps-danger); }

.form-check-input {
    background-color: var(--ps-bg);
    border-color: var(--ps-border-input);
}
.form-check-input:checked {
    background-color: var(--ps-accent);
    border-color: var(--ps-accent);
}
.form-check-input:focus { border-color: var(--ps-accent); box-shadow: var(--ps-focus-ring); }

/* Native <option> elements in dropdowns */
.form-select option {
    background-color: var(--ps-surface);
    color: var(--ps-text);
}

/* ============================================================
   Buttons (primary / outline-primary: css/theme.css)
   ============================================================ */
.btn {
    border-radius: var(--ps-radius-md);
    font-weight: var(--ps-weight-medium);
}

.btn-action {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ps-text-secondary);
    --bs-btn-border-color: var(--ps-border-strong);
    --bs-btn-hover-color: var(--ps-text);
    --bs-btn-hover-bg: var(--ps-surface-raised);
    --bs-btn-hover-border-color: var(--ps-text-muted);
    --bs-btn-active-color: var(--ps-text);
    --bs-btn-active-bg: var(--ps-surface-selected);
    --bs-btn-active-border-color: var(--ps-border-strong);
    --bs-btn-disabled-color: var(--ps-disabled-text);
    --bs-btn-disabled-border-color: var(--ps-border);
}

.btn-outline-danger {
    --bs-btn-color: var(--ps-danger);
    --bs-btn-border-color: rgba(var(--ps-danger-rgb), 0.5);
    --bs-btn-hover-color: var(--ps-bg);
    --bs-btn-hover-bg: var(--ps-danger);
    --bs-btn-hover-border-color: var(--ps-danger);
}

.btn-outline-info,
.btn-outline-light {
    --bs-btn-color: var(--ps-text-secondary);
    --bs-btn-border-color: var(--ps-border-strong);
    --bs-btn-hover-color: var(--ps-text);
    --bs-btn-hover-bg: var(--ps-surface-raised);
    --bs-btn-hover-border-color: var(--ps-text-muted);
    --bs-btn-active-color: var(--ps-text);
    --bs-btn-active-bg: var(--ps-surface-selected);
}

.btn-success {
    --bs-btn-color: var(--ps-bg);
    --bs-btn-bg: var(--ps-success);
    --bs-btn-border-color: var(--ps-success);
    --bs-btn-hover-color: var(--ps-bg);
    --bs-btn-hover-bg: var(--ps-success);
    --bs-btn-hover-border-color: var(--ps-success);
    font-weight: var(--ps-weight-semibold);
}

.btn-link { --bs-btn-color: var(--ps-accent-soft); --bs-btn-hover-color: var(--ps-accent); }

/* ============================================================
   Bootstrap Components
   ============================================================ */

/* Cards */
.card {
    background: var(--ps-surface);
    border-color: var(--ps-border);
    border-radius: var(--ps-radius-lg);
    color: var(--ps-text);
}

.card-header {
    background: var(--ps-surface-raised);
    border-bottom-color: var(--ps-border);
}

/* Alerts: tinted surface, coloured edge, readable text */
.alert {
    border-radius: var(--ps-radius-md);
    color: var(--ps-text);
}
.alert-danger  { background: rgba(var(--ps-danger-rgb), 0.12);  border-color: rgba(var(--ps-danger-rgb), 0.4); }
.alert-warning { background: rgba(var(--ps-warning-rgb), 0.12); border-color: rgba(var(--ps-warning-rgb), 0.4); }
.alert-success { background: rgba(var(--ps-success-rgb), 0.12); border-color: rgba(var(--ps-success-rgb), 0.4); }
.alert-info,
.alert-primary,
.alert-secondary { background: var(--ps-accent-subtle); border-color: rgba(var(--ps-accent-rgb), 0.35); }
.alert-danger i, .alert-danger .alert-heading   { color: var(--ps-danger); }
.alert-warning i, .alert-warning .alert-heading { color: var(--ps-warning); }
.alert-success i, .alert-success .alert-heading { color: var(--ps-success); }
.alert-info i, .alert-primary i                 { color: var(--ps-accent-soft); }

/* Badges */
.badge.bg-danger { background-color: var(--ps-danger) !important; color: var(--ps-bg) !important; }
.badge.bg-warning { background-color: var(--ps-warning) !important; color: var(--ps-bg) !important; }
.badge.bg-success { background-color: var(--ps-success) !important; color: var(--ps-bg) !important; }
.badge.bg-primary { background-color: var(--ps-accent) !important; color: var(--ps-on-accent) !important; }
.badge.bg-secondary {
    background-color: var(--ps-surface-raised) !important;
    color: var(--ps-text-secondary) !important;
}
.badge.bg-info {
    background-color: var(--ps-accent-subtle) !important;
    color: var(--ps-accent-soft) !important;
}

/* Text utilities */
.text-muted {
    color: var(--ps-text-muted) !important;
}

.text-secondary {
    color: var(--ps-text-secondary) !important;
}

.text-primary { color: var(--ps-accent-text) !important; }
.text-info    { color: var(--ps-accent-soft) !important; }
.text-success { color: var(--ps-success) !important; }
.text-warning { color: var(--ps-warning) !important; }
.text-danger  { color: var(--ps-danger) !important; }
.border-primary { border-color: var(--ps-accent) !important; }

/* Tables, list groups, dropdowns, progress, spinners, tooltips, tabs */
.table {
    --bs-table-color: var(--ps-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ps-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-hover-bg: var(--ps-accent-subtle);
    --bs-table-hover-color: var(--ps-text);
}
.list-group {
    --bs-list-group-bg: var(--ps-surface);
    --bs-list-group-color: var(--ps-text);
    --bs-list-group-border-color: var(--ps-border);
    --bs-list-group-action-hover-bg: var(--ps-surface-raised);
    --bs-list-group-action-hover-color: var(--ps-text);
    --bs-list-group-active-bg: var(--ps-surface-selected);
    --bs-list-group-active-border-color: var(--ps-accent);
    --bs-list-group-active-color: var(--ps-text);
}
.dropdown-menu {
    --bs-dropdown-bg: var(--ps-surface-raised);
    --bs-dropdown-color: var(--ps-text);
    --bs-dropdown-border-color: var(--ps-border-strong);
    --bs-dropdown-link-color: var(--ps-text-secondary);
    --bs-dropdown-link-hover-bg: var(--ps-surface-selected);
    --bs-dropdown-link-hover-color: var(--ps-text);
    --bs-dropdown-link-active-bg: var(--ps-accent);
    --bs-dropdown-link-active-color: var(--ps-on-accent);
}
.progress {
    --bs-progress-bg: var(--ps-surface-raised);
    --bs-progress-bar-bg: var(--ps-accent);
    border-radius: var(--ps-radius-pill);
}
.spinner-border, .spinner-grow { color: var(--ps-accent-text); }
.tooltip { --bs-tooltip-bg: var(--ps-surface-raised); --bs-tooltip-color: var(--ps-text); }
.nav-tabs {
    --bs-nav-tabs-border-color: var(--ps-border);
    --bs-nav-tabs-link-hover-border-color: var(--ps-border) var(--ps-border) var(--ps-border);
    --bs-nav-tabs-link-active-color: var(--ps-text);
    --bs-nav-tabs-link-active-bg: var(--ps-surface);
    --bs-nav-tabs-link-active-border-color: var(--ps-border) var(--ps-border) var(--ps-surface);
    --bs-nav-link-color: var(--ps-text-secondary);
    --bs-nav-link-hover-color: var(--ps-text);
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ps-surface-selected);
    --bs-nav-pills-link-active-color: var(--ps-text);
    --bs-nav-link-color: var(--ps-text-secondary);
    --bs-nav-link-hover-color: var(--ps-text);
}
pre, code { color: var(--ps-accent-soft); }

/* ============================================================
   Modals
   ============================================================ */
.modal {
    --bs-modal-bg: var(--ps-surface);
    --bs-modal-color: var(--ps-text);
    --bs-modal-border-color: var(--ps-border-strong);
    --bs-modal-border-radius: var(--ps-radius-lg);
    --bs-modal-header-border-color: var(--ps-border);
    --bs-modal-footer-border-color: var(--ps-border);
    --bs-modal-box-shadow: var(--ps-shadow-lg);
}
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: 0.6; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ------------------------------------------------------------------ logo: each theme shows its own mark */
.ps-logo { display: inline-block; flex-shrink: 0; }
.ps-logo--amber { display: none; }
[data-theme="amber"] .ps-logo--violet { display: none; }
[data-theme="amber"] .ps-logo--amber { display: inline; }

/* ------------------------------------------------------------------ theme switch */
.ps-theme-switch { display: flex; flex-direction: column; gap: var(--ps-space-2); padding: 0 var(--ps-space-3); }
.ps-theme-switch__label {
    font-size: var(--ps-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ps-text-muted);
}
.ps-theme-switch__options {
    display: flex;
    gap: var(--ps-space-1);
    padding: 3px;
    background: var(--ps-bg);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
}
.ps-theme-switch__option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ps-space-2);
    padding: 0.4rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--ps-radius-sm);
    background: transparent;
    color: var(--ps-text-secondary);
    font: var(--ps-weight-medium) var(--ps-text-xs) var(--ps-font);
    cursor: pointer;
    transition: background var(--ps-transition), color var(--ps-transition);
}
.ps-theme-switch__option:hover { color: var(--ps-text); background: var(--ps-surface-raised); }
.ps-theme-switch__option[aria-checked="true"] {
    color: var(--ps-text);
    background: var(--ps-surface-selected);
    border-color: var(--ps-border-strong);
}
.ps-theme-switch__swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ps-theme-switch__swatch--violet { background: #8b6cff; }
.ps-theme-switch__swatch--amber { background: #f2b84b; }

/* set by js/theme.js for the instant of a theme switch */
.ps-no-transition *, .ps-no-transition *::before, .ps-no-transition *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}