/**
 * ZES QRE global theme presets — data-theme="basic" | "carton" | "enterprise"
 * Load after tokens.css on every page.
 */
@import url('tokens.css');

/* --- Basic (default) — clean operator-console aesthetic --- */
html[data-theme="basic"],
html:not([data-theme]) {
    --color-bg: #eef3ff;
    --color-surface: #ffffff;
    --color-surface-raised: #f7faff;
    --color-text: #0d1b34;
    --color-text-muted: #556784;
    --color-border: rgba(13, 27, 52, 0.12);
    --color-border-strong: rgba(13, 27, 52, 0.23);
    --color-primary: #356dff;
    --color-primary-hover: #2459e3;
    --color-accent: #0a8f76;
    --color-info: #2459e3;
    --color-danger: #be2d2d;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --shadow-sm: 0 6px 18px rgba(13, 27, 52, 0.08);
    --shadow-md: 0 14px 34px rgba(13, 27, 52, 0.12);
    --shadow-lg: 0 22px 48px rgba(13, 27, 52, 0.18);
    --bg-color: var(--color-bg);
    --text-main: var(--color-text);
    --accent-primary: var(--color-primary);
    --theme-decor-opacity: 0.07;
    --theme-card-shadow: 0 16px 38px rgba(13, 27, 52, 0.12);
    --theme-header-weight: var(--font-display-weight, 700);
    --ui-page-gradient:
        radial-gradient(circle at 14% -8%, rgba(53, 109, 255, 0.2), transparent 46%),
        radial-gradient(circle at 88% -18%, rgba(10, 143, 118, 0.16), transparent 44%);
    --ui-surface-glass: color-mix(in srgb, #ffffff 88%, #dbe7ff);
    --ui-panel-border: color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
    --ui-panel-shadow: 0 14px 38px rgba(13, 27, 52, 0.12);
    --ui-header-gradient: linear-gradient(160deg, #ffffff 0%, #f4f8ff 72%);
}

/* --- Carton — legacy warm retail aesthetic --- */
html[data-theme="carton"] {
    --color-bg: #f4f4f9;
    --color-surface: #ffffff;
    --color-surface-raised: #fafafa;
    --color-text: #050505;
    --color-text-muted: #555555;
    --color-border: rgba(0, 0, 0, 0.1);
    --color-border-strong: rgba(0, 0, 0, 0.18);

    --color-primary: #ff6600;
    --color-primary-hover: #cc5200;
    --color-accent: #00aa44;
    --color-info: #004f9e;
    --color-danger: #cc0000;

    --font-display: 'Impact', 'Arial Black', sans-serif;
    --font-display-weight: 400;

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

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.18);

    --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);

    --box-bg: rgba(255, 102, 0, 0.06);
    --grid-color: rgba(0, 0, 0, 0.04);
    --float-block-bg: rgba(255, 102, 0, 0.08);
    --float-block-border: rgba(255, 102, 0, 0.2);
    --float-block-opacity: 0.14;
    --float-block-shadow: 0 8px 24px rgba(255, 102, 0, 0.12);

    --bg-color: var(--color-bg);
    --accent-primary: var(--color-primary);
    --theme-decor-opacity: 0.14;
    --theme-card-shadow: 0 4px 20px rgba(255, 102, 0, 0.15);
    --theme-header-weight: 400;
}

html[data-theme="carton"].dark-theme,
html[data-theme="carton"] body.dark-theme {
    --color-bg: #050505;
    --color-surface: #141414;
    --color-surface-raised: #1a1a1a;
    --color-text: #f0f0f0;
    --color-text-muted: #aaaaaa;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-strong: rgba(255, 255, 255, 0.18);

    --color-primary: #ff8800;
    --color-accent: #00ff66;

    --bg-main: var(--color-bg);
    --text-main: var(--color-text);
    --void-bg: var(--color-surface);
    --brand-bg: var(--color-bg);
    --brand-surface: var(--color-surface);
    --brand-secondary: var(--color-text);

    --box-bg: rgba(255, 136, 0, 0.1);
    --grid-color: rgba(255, 136, 0, 0.05);
    --float-block-bg: rgba(255, 136, 0, 0.14);
    --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);
}

html[data-theme="carton"] .page-decor-floats .float-block {
    opacity: var(--float-block-opacity, 0.14);
}

html[data-theme="basic"].dark-theme,
html[data-theme="basic"] body.dark-theme,
html:not([data-theme]).dark-theme,
html:not([data-theme]) body.dark-theme {
    --color-bg: #070f1f;
    --color-surface: #111d36;
    --color-surface-raised: #162748;
    --color-text: #ebf3ff;
    --color-text-muted: #9db2d3;
    --color-border: rgba(235, 243, 255, 0.12);
    --color-border-strong: rgba(235, 243, 255, 0.22);
    --color-primary: #5f98ff;
    --color-primary-hover: #3d7df4;
    --color-accent: #32ca9f;
    --ui-page-gradient:
        radial-gradient(circle at 18% -10%, rgba(95, 152, 255, 0.24), transparent 46%),
        linear-gradient(180deg, rgba(8, 16, 32, 0.34), transparent 28%);
    --ui-surface-glass: color-mix(in srgb, #112544 88%, #0a162e);
    --ui-panel-border: color-mix(in srgb, #5f98ff 34%, var(--color-border));
    --ui-panel-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
    --ui-header-gradient: linear-gradient(180deg, #132544 0%, #0e1d35 100%);
}

/* --- Enterprise — high-contrast operations center aesthetic --- */
html[data-theme="enterprise"] {
    --color-bg: #e8eef8;
    --color-surface: #ffffff;
    --color-surface-raised: #f2f6fd;
    --color-text: #0a1428;
    --color-text-muted: #334a67;
    --color-border: rgba(10, 20, 40, 0.16);
    --color-border-strong: rgba(10, 20, 40, 0.26);

    --color-primary: #0f4fce;
    --color-primary-hover: #093da3;
    --color-accent: #0a7660;
    --color-info: #0f4fce;
    --color-danger: #b12828;

    --font-display: 'Inter', 'Segoe UI', 'Arial', sans-serif;
    --font-display-weight: 700;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --shadow-sm: 0 4px 12px rgba(8, 22, 45, 0.08);
    --shadow-md: 0 10px 28px rgba(8, 22, 45, 0.12);
    --shadow-lg: 0 18px 42px rgba(8, 22, 45, 0.2);

    --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);

    --box-bg: rgba(15, 76, 201, 0.08);
    --grid-color: rgba(10, 31, 61, 0.06);
    --float-block-bg: rgba(31, 79, 191, 0.08);
    --float-block-border: rgba(31, 79, 191, 0.16);
    --float-block-opacity: 0.12;
    --float-block-shadow: 0 10px 28px rgba(10, 31, 61, 0.12);

    --bg-color: var(--color-bg);
    --accent-primary: var(--color-primary);
    --theme-decor-opacity: 0.08;
    --theme-card-shadow: 0 10px 28px rgba(8, 22, 45, 0.14);
    --theme-header-weight: 700;
    --ui-page-gradient:
        linear-gradient(180deg, rgba(13, 79, 206, 0.09) 0%, transparent 34%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0.5px, transparent 0.5px);
    --ui-surface-glass: color-mix(in srgb, #ffffff 94%, #d5e3f8);
    --ui-panel-border: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
    --ui-panel-shadow: 0 12px 30px rgba(8, 22, 45, 0.15);
    --ui-header-gradient: linear-gradient(180deg, #ffffff 0%, #f0f5fd 100%);
}

html[data-theme="enterprise"].dark-theme,
html[data-theme="enterprise"] body.dark-theme {
    --color-bg: #050b16;
    --color-surface: #0e1a31;
    --color-surface-raised: #132444;
    --color-text: #eef5ff;
    --color-text-muted: #9fb6d6;
    --color-border: rgba(255, 255, 255, 0.11);
    --color-border-strong: rgba(255, 255, 255, 0.2);

    --color-primary: #4d8eff;
    --color-primary-hover: #2f74f0;
    --color-accent: #2ad1a0;

    --bg-main: var(--color-bg);
    --text-main: var(--color-text);
    --void-bg: var(--color-surface);
    --brand-bg: var(--color-bg);
    --brand-surface: var(--color-surface);
    --brand-secondary: var(--color-text);

    --box-bg: rgba(77, 142, 255, 0.14);
    --grid-color: rgba(75, 139, 255, 0.1);
    --float-block-bg: rgba(77, 142, 255, 0.18);
    --float-block-border: rgba(255, 255, 255, 0.14);
    --float-block-opacity: 0.32;
    --float-block-shadow: 0 14px 36px rgba(0, 0, 0, 0.52);

    --logo-filter-on-bg: brightness(0) invert(1);
    --logo-filter-on-text: brightness(0);
    --logo-filter-on-surface: brightness(0) invert(1);
    --ui-page-gradient:
        radial-gradient(circle at 8% -4%, rgba(77, 142, 255, 0.26), transparent 42%),
        linear-gradient(180deg, rgba(4, 10, 21, 0.3), transparent 20%);
    --ui-surface-glass: color-mix(in srgb, #11213e 90%, #0a1428);
    --ui-panel-border: color-mix(in srgb, #6aa1ff 35%, var(--color-border));
    --ui-panel-shadow: 0 16px 42px rgba(0, 0, 0, 0.46);
    --ui-header-gradient: linear-gradient(180deg, #101e39 0%, #0b162a 100%);
}

/* Fluid typography baseline for all themes */
html {
    font-size: clamp(14px, 0.35vw + 13px, 17px);
}

body {
    font-family: var(--font-ui);
    background: var(--brand-bg, var(--bg-color, var(--color-bg)));
    background-image: var(--ui-page-gradient, none);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: var(--brand-secondary, var(--text-main, var(--color-text)));
}