/**
 * LVCE aviation template - design tokens.
 *
 * Brand colours, radii and content width are overridden from the template
 * style (Joomla administrator) through a small inline :root block.
 * Every other colour is derived from these tokens.
 */

:root {
    /* Brand */
    --lvce-blue: #0057a4;
    --lvce-blue-dark: #003b70;
    --lvce-blue-light: #dceeff;
    --lvce-sky: #edf7ff;
    --lvce-red: #d71920;
    --lvce-red-dark: #a80f15;
    --lvce-white: #ffffff;
    --lvce-surface: #f6f8fb;
    --lvce-border: #d8e1ea;
    --lvce-text: #17212b;
    --lvce-text-muted: #607080;
    --lvce-success: #287a46;
    --lvce-warning: #c87900;
    --lvce-shadow: 0 12px 32px rgba(0, 48, 91, 0.12);
    --lvce-radius-small: 8px;
    --lvce-radius-medium: 14px;
    --lvce-radius-large: 24px;
    --lvce-content-width: 1280px;

    /* Derived brand tints (follow the configured colours automatically) */
    --lvce-blue-light: color-mix(in srgb, var(--lvce-blue) 14%, #ffffff);
    --lvce-sky: color-mix(in srgb, var(--lvce-blue) 6%, #ffffff);
    --lvce-red-dark: color-mix(in srgb, var(--lvce-red) 78%, #000000);
    --lvce-blue-deeper: color-mix(in srgb, var(--lvce-blue-dark) 80%, #000000);

    /* Semantic roles (light mode) */
    --lvce-bg: var(--lvce-white);
    --lvce-bg-alt: var(--lvce-surface);
    --lvce-bg-sky: var(--lvce-sky);
    --lvce-card-bg: var(--lvce-white);
    --lvce-heading: #0d2a47;
    --lvce-link: var(--lvce-blue);
    --lvce-link-hover: var(--lvce-blue-dark);
    --lvce-focus: #ffbf47;
    --lvce-focus-ring: 0 0 0 3px var(--lvce-white), 0 0 0 6px var(--lvce-blue-dark);
    --lvce-on-primary: #ffffff;
    --lvce-accent-text: var(--lvce-red);
    --lvce-danger-text: var(--lvce-red-dark);
    --lvce-caution-text: #8a5300;
    --lvce-icon-accent: var(--lvce-blue);
    --lvce-badge-text: var(--lvce-blue-dark);
    --lvce-select-arrow: url("../images/icons/chevron-down.svg");
    --lvce-header-bg: rgba(255, 255, 255, 0.96);
    --lvce-header-text: var(--lvce-text);
    --lvce-footer-bg: var(--lvce-blue-deeper);
    --lvce-footer-text: #e6eef7;
    --lvce-footer-muted: #b7c8da;
    --lvce-overlay: linear-gradient(90deg, rgba(0, 28, 56, 0.82) 0%, rgba(0, 40, 80, 0.55) 48%, rgba(0, 40, 80, 0.12) 100%);
    --lvce-shadow-small: 0 2px 8px rgba(0, 48, 91, 0.08);
    --lvce-shadow-hover: 0 18px 40px rgba(0, 48, 91, 0.18);

    /* Typography */
    --lvce-font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --lvce-font-heading: "LVCE Montserrat", "Montserrat", "Manrope", var(--lvce-font-system);
    --lvce-font-body: "LVCE Inter", "Inter", "Source Sans 3", var(--lvce-font-system);
    --lvce-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --lvce-text-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
    --lvce-text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);
    --lvce-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
    --lvce-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
    --lvce-text-xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
    --lvce-text-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
    --lvce-text-3xl: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
    --lvce-text-hero: clamp(2.2rem, 1.4rem + 3.8vw, 4.4rem);
    --lvce-leading: 1.65;
    --lvce-leading-tight: 1.15;
    --lvce-measure: 68ch;

    /* Spacing */
    --lvce-space-1: 0.25rem;
    --lvce-space-2: 0.5rem;
    --lvce-space-3: 0.75rem;
    --lvce-space-4: 1rem;
    --lvce-space-5: 1.5rem;
    --lvce-space-6: 2rem;
    --lvce-space-7: 3rem;
    --lvce-space-8: 4rem;
    --lvce-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
    --lvce-section-space: clamp(3rem, 2rem + 4vw, 6rem);

    /* Misc */
    --lvce-header-height: 76px;
    --lvce-transition: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
    --lvce-touch: 44px;

    color-scheme: light;
}

/* ---------------------------------------------------------------------------
 * Dark colour scheme
 * Applied when the administrator enabled dark mode and either the visitor chose
 * "dark", or "auto" is active and the operating system prefers dark.
 * ------------------------------------------------------------------------- */
:root[data-color-mode="dark"] {
    --lvce-bg: #0c1622;
    --lvce-bg-alt: #111f2e;
    --lvce-bg-sky: #10243a;
    --lvce-card-bg: #152638;
    --lvce-surface: #111f2e;
    --lvce-border: #2a3e54;
    --lvce-text: #e7eef6;
    --lvce-text-muted: #a9b9ca;
    --lvce-heading: #f4f8fc;
    --lvce-link: #8cc4ff;
    --lvce-link-hover: #b9dcff;
    --lvce-blue-light: #1b3552;
    --lvce-sky: #10243a;
    --lvce-header-bg: rgba(12, 22, 34, 0.95);
    --lvce-header-text: #e7eef6;
    --lvce-footer-bg: #07101a;
    --lvce-focus-ring: 0 0 0 3px #0c1622, 0 0 0 6px #8cc4ff;
    --lvce-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --lvce-shadow-small: 0 2px 8px rgba(0, 0, 0, 0.35);
    --lvce-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.55);
    --lvce-success: #6fcf8f;
    --lvce-warning: #ffc266;
    --lvce-accent-text: #ff8a8f;
    --lvce-danger-text: #ff8a8f;
    --lvce-caution-text: #ffc266;
    --lvce-icon-accent: #8cc4ff;
    --lvce-badge-text: #dceeff;
    --lvce-select-arrow: none;

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-color-mode="auto"] {
        --lvce-bg: #0c1622;
        --lvce-bg-alt: #111f2e;
        --lvce-bg-sky: #10243a;
        --lvce-card-bg: #152638;
        --lvce-surface: #111f2e;
        --lvce-border: #2a3e54;
        --lvce-text: #e7eef6;
        --lvce-text-muted: #a9b9ca;
        --lvce-heading: #f4f8fc;
        --lvce-link: #8cc4ff;
        --lvce-link-hover: #b9dcff;
        --lvce-blue-light: #1b3552;
        --lvce-sky: #10243a;
        --lvce-header-bg: rgba(12, 22, 34, 0.95);
        --lvce-header-text: #e7eef6;
        --lvce-footer-bg: #07101a;
        --lvce-focus-ring: 0 0 0 3px #0c1622, 0 0 0 6px #8cc4ff;
        --lvce-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
        --lvce-shadow-small: 0 2px 8px rgba(0, 0, 0, 0.35);
        --lvce-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.55);
        --lvce-success: #6fcf8f;
        --lvce-warning: #ffc266;
        --lvce-accent-text: #ff8a8f;
        --lvce-danger-text: #ff8a8f;
        --lvce-caution-text: #ffc266;
        --lvce-icon-accent: #8cc4ff;
        --lvce-badge-text: #dceeff;
        --lvce-select-arrow: none;

        color-scheme: dark;
    }
}