/**
 * ZES QRE global theme presets — data-theme="basic" | "carton"
 * 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]) {
    --bg-color: var(--color-bg);
    --text-main: var(--color-text);
    --accent-primary: var(--color-primary);
    --theme-decor-opacity: 0.08;
    --theme-card-shadow: var(--shadow-md);
    --theme-header-weight: var(--font-display-weight, 700);
}

/* --- 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);
}

/* 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)));
    color: var(--brand-secondary, var(--text-main, var(--color-text)));
}