/* ===== Light Mode ===== */
/* Only override CSS variables — all component styles inherit from styles.css */

body.light-mode {
    /* Surfaces — warm white cards on cool gray page */
    --bg-primary: #f0f1f3;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e6e8ec;
    --bg-nav: #e9eaed;
    --bg-input: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.04);

    /* Text */
    --text-primary: #1a1c20;
    --text-secondary: #4d5260;
    --text-muted: #888e9c;
    --text-on-color: #ffffff;

    /* Primary — darker for contrast on white */
    --primary-color: #2e7abf;
    --primary-hover: #236aa8;
    --primary-subtle: rgba(46, 122, 191, 0.08);
    --accent-glow: rgba(46, 122, 191, 0.10);

    /* Semantic — darkened for white-bg readability */
    --success-color: #2d9d5e;
    --success-hover: #258a50;
    --success-subtle: rgba(45, 157, 94, 0.08);

    --warning-color: #c88b1f;
    --warning-hover: #b07a18;
    --warning-subtle: rgba(200, 139, 31, 0.08);

    --danger-color: #c23035;
    --danger-hover: #a8282d;
    --danger-subtle: rgba(194, 48, 53, 0.08);

    --info-color: #2e9dba;
    --info-hover: #268a9e;
    --info-subtle: rgba(46, 157, 186, 0.08);

    --purple-color: #7c3aed;
    --purple-hover: #6d28d9;
    --purple-subtle: rgba(124, 58, 237, 0.08);

    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.40);

    /* Borders & Shadows */
    --border-color: rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10);
}

/* Sidebar needs explicit bg since it uses bg-secondary */
body.light-mode .sidebar {
    border-right: 1px solid var(--border-color);
}

/* Scrollbar in light mode */
body.light-mode ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* ── Calendar card colours — stronger contrast on white background ── */

/* Fit / sale appointment cards (purple) */
body.light-mode .wk-card {
    background: rgba(155, 114, 207, 0.12);
    border-color: rgba(155, 114, 207, 0.55);
}

body.light-mode .wk-card:hover {
    background: rgba(155, 114, 207, 0.22);
    border-color: rgba(155, 114, 207, 0.8);
}

body.light-mode .wk-card-header {
    background: rgba(155, 114, 207, 0.22);
    border-bottom-color: rgba(155, 114, 207, 0.35);
}

/* Remedial cards (orange) */
body.light-mode .wk-card.remedial-card {
    background: rgba(255, 152, 0, 0.12);
    border-color: rgba(255, 152, 0, 0.55);
}

body.light-mode .wk-card.remedial-card .wk-card-header {
    background: rgba(255, 152, 0, 0.22);
    border-bottom-color: rgba(255, 152, 0, 0.35);
}

/* PO delivery cards (teal/blue) */
body.light-mode .wk-po-card {
    background: rgba(90, 180, 220, 0.12);
    border-color: rgba(90, 180, 220, 0.55);
}

body.light-mode .wk-po-card:hover {
    background: rgba(90, 180, 220, 0.22);
}

body.light-mode .wk-po-supplier-header {
    background: rgba(90, 180, 220, 0.22);
    border-bottom-color: rgba(90, 180, 220, 0.35);
}