/* ============================================================
   theme.css — Global design tokens + Bootstrap 5.3 bridge
   ------------------------------------------------------------
   To re-brand the whole application, edit ONLY section 1.
   Light values live in section 2, dark overrides in section 3.
   No component classes in this file — see components.css.
   ============================================================ */

/* === 1. BRAND KNOB ========================================= */
/* DEFAULT THEME (gunmetal grey + blue accent) */
:root {
    --app-brand: #818589;
    --app-brand-rgb: 129, 133, 137;
    --app-brand-hover: #666a6e;
    --app-brand-subtle: #f2f3f4;
    --app-brand-contrast: #ffffff;
    --app-brand-alt: #4b5563;
    --app-brand-alt-hover: #374151;
    --app-accent: #3b82f6;
    --app-accent-rgb: 59, 130, 246;
    --app-accent-hover: #2563eb;
    --app-accent-subtle: #eff6ff;
    --app-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* PREVIOUS THEME (teal / sky + orange accent) — swap with the block above to revert.
:root {
    --app-brand: #0f766e;
    --app-brand-rgb: 15, 118, 110;
    --app-brand-hover: #115e59;
    --app-brand-subtle: #f0fdfa;
    --app-brand-contrast: #ffffff;
    --app-brand-alt: #0369a1;
    --app-brand-alt-hover: #075985;
    --app-accent: #f97316;
    --app-accent-rgb: 249, 115, 22;
    --app-accent-hover: #ea580c;
    --app-accent-subtle: #ffedd5;
    --app-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*/

/* PREVIOUS THEME (dusty rose + sage accent) — swap with the block above to revert.
:root {
    --app-brand: #a95c68;
    --app-brand-rgb: 169, 92, 104;
    --app-brand-hover: #7f454e;
    --app-brand-subtle: #fbeef0;
    --app-brand-contrast: #ffffff;
    --app-brand-alt: #8a4a63;
    --app-brand-alt-hover: #6b3750;
    --app-accent: #6b8f71;
    --app-accent-rgb: 107, 143, 113;
    --app-accent-hover: #557259;
    --app-accent-subtle: #eef3ec;
    --app-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*/

/* PREVIOUS THEME (maroon + gold accent) — swap with the block above to revert.
:root {
    --app-brand: #7a1f2b;
    --app-brand-rgb: 122, 31, 43;
    --app-brand-hover: #5c1620;
    --app-brand-subtle: #fbe9eb;
    --app-brand-contrast: #ffffff;
    --app-brand-alt: #9f1239;
    --app-brand-alt-hover: #7c0a2c;
    --app-accent: #c9a227;
    --app-accent-rgb: 201, 162, 39;
    --app-accent-hover: #a8841e;
    --app-accent-subtle: #fdf6e3;
    --app-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*/

/* PREVIOUS THEME (indigo / violet + emerald) — swap with the block above to revert.
:root {
    --app-brand: #4f46e5;
    --app-brand-rgb: 79, 70, 229;
    --app-brand-hover: #4338ca;
    --app-brand-subtle: #eef2ff;
    --app-brand-contrast: #ffffff;
    --app-brand-alt: #7c3aed;
    --app-brand-alt-hover: #6d28d9;
    --app-accent: #10b981;
    --app-accent-rgb: 16, 185, 129;
    --app-accent-hover: #059669;
    --app-accent-subtle: #d1fae5;
    --app-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*/

/* === 2. SEMANTIC TOKENS — LIGHT ============================ */
:root,
[data-bs-theme="light"] {
    /* surfaces */
    --app-bg: #f8fafc;
    --app-surface: #ffffff;
    --app-surface-2: #f3f4f6;
    --app-surface-3: #eef2f7;

    /* text */
    --app-text: #1f2937;
    --app-text-muted: #6b7280;
    --app-text-subtle: #9ca3af;

    /* borders & focus */
    --app-border: #e5e7eb;
    --app-border-strong: #d1d5db;
    --app-focus-ring: rgba(var(--app-brand-rgb), 0.25);

    /* status */
    --app-success: #198754;
    --app-success-subtle: #f0fdf4;
    --app-warning: #b45309;
    --app-warning-subtle: #fef3c7;
    --app-danger: #dc3545;
    --app-danger-subtle: #fff5f5;
    --app-info: #0ea5e9;
    --app-info-subtle: #f0f9ff;

    /* score semantics (results pages) */
    --app-score-high: var(--app-success);
    --app-score-high-subtle: var(--app-success-subtle);
    --app-score-mid: var(--app-warning);
    --app-score-mid-subtle: var(--app-warning-subtle);
    --app-score-low: var(--app-danger);
    --app-score-low-subtle: var(--app-danger-subtle);

    /* gradients — built from brand/accent so re-theming stays one block */
    --app-gradient-brand: linear-gradient(135deg, var(--app-brand), var(--app-brand-alt));
    --app-gradient-navbar: linear-gradient(90deg, var(--app-brand), var(--app-brand-alt));

    /* elevation */
    --app-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --app-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.06);
    --app-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.10);

    /* shape */
    --app-radius-sm: 8px;
    --app-radius: 12px;
    --app-radius-lg: 16px;
    --app-radius-pill: 999px;
}

/* === 3. DARK OVERRIDES ===================================== */
[data-bs-theme="dark"] {
    --app-bg: #0f172a;
    --app-surface: #1e293b;
    --app-surface-2: #263449;
    --app-surface-3: #0b1220;

    --app-text: #e2e8f0;
    --app-text-muted: #94a3b8;
    --app-text-subtle: #64748b;

    --app-border: #334155;
    --app-border-strong: #475569;

    --app-brand-subtle: rgba(var(--app-brand-rgb), 0.16);
    --app-accent-subtle: rgba(var(--app-accent-rgb), 0.16);

    /* status colors lightened for contrast on dark surfaces */
    --app-success: #34d399;
    --app-success-subtle: rgba(52, 211, 153, 0.12);
    --app-warning: #fbbf24;
    --app-warning-subtle: rgba(251, 191, 36, 0.12);
    --app-danger: #f87171;
    --app-danger-subtle: rgba(248, 113, 113, 0.12);
    --app-info: #38bdf8;
    --app-info-subtle: rgba(56, 189, 248, 0.12);

    --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --app-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
    --app-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.45);
}

/* === 4. BOOTSTRAP BRIDGE =================================== */
/* Root-level variables (declared for both themes so this file
   always wins over bootstrap.css regardless of theme). */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-body-font-family: var(--app-font);
    --bs-border-color: var(--app-border);
    --bs-secondary-color: var(--app-text-muted);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-primary: var(--app-brand);
    --bs-primary-rgb: var(--app-brand-rgb);
    --bs-link-color: var(--app-brand);
    --bs-link-color-rgb: var(--app-brand-rgb);
    --bs-link-hover-color: var(--app-brand-hover);
    --bs-link-hover-color-rgb: var(--app-brand-rgb);
    --bs-focus-ring-color: var(--app-focus-ring);
}

/* Component-level variables: Bootstrap precompiles hex into each
   component, so root overrides alone are not enough. */
.btn-primary {
    --bs-btn-bg: var(--app-brand);
    --bs-btn-border-color: var(--app-brand);
    --bs-btn-color: var(--app-brand-contrast);
    --bs-btn-hover-bg: var(--app-brand-hover);
    --bs-btn-hover-border-color: var(--app-brand-hover);
    --bs-btn-hover-color: var(--app-brand-contrast);
    --bs-btn-active-bg: var(--app-brand-hover);
    --bs-btn-active-border-color: var(--app-brand-hover);
    --bs-btn-active-color: var(--app-brand-contrast);
    --bs-btn-disabled-bg: var(--app-brand);
    --bs-btn-disabled-border-color: var(--app-brand);
    --bs-btn-focus-shadow-rgb: var(--app-brand-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--app-brand);
    --bs-btn-border-color: var(--app-brand);
    --bs-btn-hover-bg: var(--app-brand);
    --bs-btn-hover-border-color: var(--app-brand);
    --bs-btn-hover-color: var(--app-brand-contrast);
    --bs-btn-active-bg: var(--app-brand);
    --bs-btn-active-border-color: var(--app-brand);
    --bs-btn-active-color: var(--app-brand-contrast);
    --bs-btn-focus-shadow-rgb: var(--app-brand-rgb);
}

.card {
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--app-border);
}

.modal-content {
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--app-surface);
    --bs-dropdown-border-color: var(--app-border);
    --bs-dropdown-link-color: var(--app-text);
    --bs-dropdown-link-hover-bg: var(--app-surface-2);
    --bs-dropdown-link-active-bg: var(--app-brand);
    box-shadow: var(--app-shadow-md);
}

.form-control,
.form-select {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
    border-radius: var(--app-radius-sm);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-brand);
    box-shadow: 0 0 0 3px var(--app-focus-ring);
}

.form-control::placeholder {
    color: var(--app-text-subtle);
}

.pagination {
    --bs-pagination-bg: var(--app-surface);
    --bs-pagination-color: var(--app-brand);
    --bs-pagination-border-color: var(--app-border);
    --bs-pagination-hover-bg: var(--app-surface-2);
    --bs-pagination-hover-color: var(--app-brand-hover);
    --bs-pagination-focus-bg: var(--app-surface-2);
    --bs-pagination-focus-color: var(--app-brand-hover);
    --bs-pagination-active-bg: var(--app-brand);
    --bs-pagination-active-border-color: var(--app-brand);
    --bs-pagination-disabled-bg: var(--app-surface);
    --bs-pagination-disabled-color: var(--app-text-subtle);
    --bs-pagination-disabled-border-color: var(--app-border);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-hover-bg: var(--app-surface-2);
    --bs-table-hover-color: var(--app-text);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--app-brand);
}

.progress {
    --bs-progress-bg: var(--app-surface-2);
}

/* === 5. BASE POLISH ======================================== */
body {
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--app-font);
}