/**
 * ZES-QRE design tokens — single source for light/dark + tenant branding.
 * Load first on every page.
 */
:root {
    /* Semantic palette (maps to tenant --brand-* when branded) */
    --color-bg: #f4f6f8;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-text: #001a33;
    --color-text-muted: #5a6a7a;
    --color-border: rgba(0, 26, 51, 0.12);
    --color-border-strong: rgba(0, 26, 51, 0.22);

    --color-primary: #ff6600;
    --color-primary-hover: #cc5200;
    --color-accent: #00aa44;
    --color-info: #004f9e;
    --color-danger: #cc0000;
    --color-danger-hover: #8b0000;
    --color-success: #008000;
    --color-warning: #f57c00;

    --shadow-sm: 0 2px 8px rgba(0, 26, 51, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 26, 51, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 26, 51, 0.14);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    /* Professional display stack — switchable to 'classic' (Impact) via branding */
    --font-display: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-display-weight: 700;

    /* Aliases used across the codebase */
    --bg-main: var(--color-bg);
    --text-main: var(--color-text);
    --void-bg: var(--color-surface);
    --accent-orange: var(--color-primary);
    --accent-green: var(--color-accent);

    --brand-primary: var(--color-primary);
    --brand-secondary: var(--color-text);
    --brand-accent: var(--color-accent);
    --brand-bg: var(--color-bg);
    --brand-surface: var(--color-surface);

    --shell-primary: var(--brand-primary);
    --shell-accent: var(--brand-accent);
    --shell-text: var(--brand-secondary);
    --shell-bg: var(--brand-bg);
    --shell-surface: var(--brand-surface);

    --logo-filter-on-bg: brightness(0);
    --logo-filter-on-text: brightness(0) invert(1);
    --logo-filter-on-surface: brightness(0);
    --btn-on-primary: #ffffff;

    --float-block-bg: rgba(0, 0, 0, 0.06);
    --float-block-border: rgba(0, 0, 0, 0.12);
    --float-block-opacity: 0.08;
    --float-block-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    --btn-on-accent: #ffffff;

    --grid-color: rgba(0, 26, 51, 0.05);
    --box-bg: rgba(255, 102, 0, 0.06);
    --auto-border: rgba(255, 102, 0, 0.25);

    --float-block-bg: rgba(0, 0, 0, 0.06);
    --float-block-border: rgba(0, 0, 0, 0.12);
    --float-block-opacity: 0.08;
    --float-block-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Dark mode — works with and without tenant branding */
html.dark-theme,
body.dark-theme {
    --color-bg: #0c0e12;
    --color-surface: #161a22;
    --color-surface-raised: #1e2430;
    --color-text: #e8ecf2;
    --color-text-muted: #9aa8b8;
    --color-border: rgba(232, 236, 242, 0.1);
    --color-border-strong: rgba(232, 236, 242, 0.18);

    --color-primary: #ff8800;
    --color-primary-hover: #ffaa44;
    --color-accent: #00cc55;
    --color-info: #4d9fff;
    --color-danger: #ff5555;
    --color-danger-hover: #ff7777;
    --color-success: #44cc66;
    --color-warning: #ffaa33;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);

    --bg-main: var(--color-bg);
    --text-main: var(--color-text);
    --void-bg: var(--color-surface);
    --grid-color: rgba(255, 136, 0, 0.06);
    --box-bg: rgba(255, 136, 0, 0.1);

    --float-block-bg: rgba(255, 136, 0, 0.12);
    --float-block-border: rgba(255, 255, 255, 0.08);
    --float-block-opacity: 0.28;
    --float-block-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);

    --logo-filter-on-bg: brightness(0) invert(1);
    --logo-filter-on-text: brightness(0);
    --logo-filter-on-surface: brightness(0) invert(1);
}

/* Branded pages inherit dark surfaces via JS (applyBranding + dark-theme) */
body.brand-active.dark-theme {
    color-scheme: dark;
}

/* Professional display typography — bold weight wherever the display font is used */
h1, h2, h3, h4,
.section-title, .modal-title, .app-section-title,
.menu-text, .admin-text, .welcome-box, .tender-btn,
.btn-primary, .btn-add-row, .login-submit-btn,
.app-shell-page-title h1, .back-btn, .logout-btn,
.kpi-value, .timeclock-display, .total-row,
.qre-app-launcher-title, .qre-faq-fab,
.sd-header, .sd-btn, .pin-pad button,
.operator-tab-btn, .network-title, .routing-title {
    font-weight: var(--font-display-weight, 700);
}