/* Design tokens. Adjust only here to rebrand the app. */
:root {
    --ec-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --ec-font-size: 16px;
    --ec-gap: 1rem;
    --ec-radius: 14px;
    --ec-radius-sm: 10px;

    /* Eurotels is the default when no saved user theme exists. */
    --ec-bg: #f4f7fb;
    --ec-panel: #ffffff;
    --ec-panel-alt: #eaf0f7;
    --ec-text: #031e23;
    --ec-muted: #647684;
    --ec-border: #d8e2ee;
    --ec-brand: #134a93;
    --ec-brand-700: #0e2648;
    --ec-brand-100: rgba(19, 74, 147, .12);
    --ec-accent: #46be8a;
    --ec-success: #28a745;
    --ec-warning: #f39c12;
    --ec-warn: #f39c12;
    --ec-danger: #e03a3a;
    --ec-bg-wash-brand: rgba(19, 74, 147, .12);
    --ec-bg-wash-accent: rgba(70, 190, 138, .08);
    --ec-shadow: 0 10px 28px rgba(14, 38, 72, .10);
    --ec-shadow-sm: 0 3px 12px rgba(14, 38, 72, .08);
    --ec-ring: 0 0 0 3px rgba(19, 74, 147, .28);
    color-scheme: light;
}

:root[data-theme="eurotels"],
html[data-theme="eurotels"],
body[data-theme="eurotels"] {
    --ec-bg: #f4f7fb;
    --ec-panel: #ffffff;
    --ec-panel-alt: #eaf0f7;
    --ec-text: #031e23;
    --ec-muted: #647684;
    --ec-border: #d8e2ee;
    --ec-brand: #134a93;
    --ec-brand-700: #0e2648;
    --ec-brand-100: rgba(19, 74, 147, .12);
    --ec-accent: #46be8a;
    --ec-success: #28a745;
    --ec-warning: #f39c12;
    --ec-warn: #f39c12;
    --ec-danger: #e03a3a;
    --ec-bg-wash-brand: rgba(19, 74, 147, .12);
    --ec-bg-wash-accent: rgba(70, 190, 138, .08);
    --ec-shadow: 0 10px 28px rgba(14, 38, 72, .10);
    --ec-shadow-sm: 0 3px 12px rgba(14, 38, 72, .08);
    --ec-ring: 0 0 0 3px rgba(19, 74, 147, .28);
    color-scheme: light;
}

:root[data-theme="light"],
html[data-theme="light"],
body[data-theme="light"] {
    --ec-bg: #f6f8fb;
    --ec-panel: #ffffff;
    --ec-panel-alt: #f1f3f7;
    --ec-text: #111827;
    --ec-muted: #6b7280;
    --ec-border: #e5e7eb;
    --ec-brand: #1f7aec;
    --ec-brand-700: #1862be;
    --ec-brand-100: rgba(31, 122, 236, .12);
    --ec-accent: #22b07d;
    --ec-success: #16a34a;
    --ec-warning: #f39c12;
    --ec-warn: #f39c12;
    --ec-danger: #e03a3a;
    --ec-bg-wash-brand: rgba(31, 122, 236, .10);
    --ec-bg-wash-accent: rgba(34, 176, 125, .08);
    --ec-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    --ec-shadow-sm: 0 2px 10px rgba(0, 0, 0, .06);
    --ec-ring: 0 0 0 3px rgba(31, 122, 236, .35);
    color-scheme: light;
}

:root[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"] {
    --ec-bg: #111927;
    --ec-panel: #182335;
    --ec-panel-alt: #223047;
    --ec-text: #edf4fb;
    --ec-muted: #aebed0;
    --ec-border: rgba(174, 190, 208, .22);
    --ec-brand: #7fb6ff;
    --ec-brand-700: #b7d6ff;
    --ec-brand-100: rgba(127, 182, 255, .16);
    --ec-accent: #5bd3a1;
    --ec-success: #46be8a;
    --ec-warning: #ffc857;
    --ec-warn: #ffc857;
    --ec-danger: #ff6b6b;
    --ec-bg-wash-brand: rgba(127, 182, 255, .10);
    --ec-bg-wash-accent: rgba(91, 211, 161, .08);
    --ec-shadow: 0 14px 36px rgba(5, 11, 20, .34);
    --ec-shadow-sm: 0 5px 16px rgba(5, 11, 20, .26);
    --ec-ring: 0 0 0 3px rgba(127, 182, 255, .28);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"],
    html[data-theme="system"],
    body[data-theme="system"] {
        --ec-bg: #111927;
        --ec-panel: #182335;
        --ec-panel-alt: #223047;
        --ec-text: #edf4fb;
        --ec-muted: #aebed0;
        --ec-border: rgba(174, 190, 208, .22);
        --ec-brand: #7fb6ff;
        --ec-brand-700: #b7d6ff;
        --ec-brand-100: rgba(127, 182, 255, .16);
        --ec-accent: #5bd3a1;
        --ec-success: #46be8a;
        --ec-warning: #ffc857;
        --ec-warn: #ffc857;
        --ec-danger: #ff6b6b;
        --ec-bg-wash-brand: rgba(127, 182, 255, .10);
        --ec-bg-wash-accent: rgba(91, 211, 161, .08);
        --ec-shadow: 0 14px 36px rgba(5, 11, 20, .34);
        --ec-shadow-sm: 0 5px 16px rgba(5, 11, 20, .26);
        --ec-ring: 0 0 0 3px rgba(127, 182, 255, .28);
        color-scheme: dark;
    }
}