/* Lumière design tokens (colors, typography, layout variables) */

:root {
    --font-sans: 'Source Sans Pro', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

    --grid-gap: 20px;
    --container-max-width: 1200px;
    /* Results dashboard: narrower than main container */
    --results-dashboard-max-width: min(1020px, 88vw);

    --bg-page-base: #f6f4f2;
    --bg-primary: #f6f4f2;

    --color-brand: #0D1B2A;
    --text-primary: #0D1B2A;
    --text-secondary: #2C353F;

    --nav-link: #2C353F;
    --nav-link-hover: #0D1B2A;

    --accent: #0D1B2A;
    --milk-white: #FFFFFF;

    --bg-secondary: #FFFFFF;
    --bg-card: rgba(255, 255, 255, 0.92);
    --section-alt-bg: rgba(255, 255, 255, 0.75);
    --section-alt-text: #0D1B2A;

    /* Fixed header height; scroll-margin / hero padding use this */
    --header-height: 80px;
    --hero-header-offset: var(--header-height);
    --hero-split-media: 45%;
    /* Hero image column flex-basis (not grid minmax) */
    --hero-media-col: 45%;
    --hero-image-object-position: right top;
    /*
     * --hero-content-w: max width of text column (.home-about-content).
     * --hero-aspect-*: unitless ratios for mobile aspect-ratio (px breaks layout).
     */
    --hero-content-w: 648px;
    --hero-content-h: 512px;
    --hero-aspect-w: 648;
    --hero-aspect-h: 512;
    /*
     * Hero section height = viewport - trim (--hero-section-height-trim).
     * Separate from --hero-media-col (column width).
     */
    --hero-section-viewport-h: 100vh;
    --hero-section-height-trim: 0px;
    /* Bottom gradient band on hero image */
    --hero-image-bottom-gradient-h: 215px;
    --hero-image-bottom-gradient: linear-gradient(to top, #0D1B2A 0%, rgba(13, 27, 42, 0) 70%);

    --home-about-panel-bg: #f6f4f2;
    --home-about-split-card-text-bg: #fefaf8;

    --case-studies-gap: 10px;

    --results-dashboard-badge-bg: #e8f5e9;
    --results-dashboard-badge-text: #1b5e20;
    --results-dashboard-metric-border: rgba(13, 27, 42, 0.12);
    --results-dashboard-platform-track: #e3eaf2;

    --empire-cta-bg: #0D1B2A;
    --empire-cta-text-muted: #b4bcc8;
    /* #empire-cta: two-column layout (copy + image) */
    --empire-cta-section-height: 611px;
    --empire-cta-content-w: 536px;
    --empire-cta-image-w: 648px;
    --empire-cta-column-gap: 65px;
    --empire-cta-inner-max: 1249px;
    --empire-cta-image-object-position: center top;

    --footer-cta-bg: #0D1B2A;
    --cta-club-text-muted: #b4bcc8;
    --home-about-eyebrow: #666666;
    --home-about-lead: #5c6670;

    /* CTA hover gradient: light section vs dark (.cta-button--inverse) */
    --cta-on-light-section-hover: #667382;
    --cta-on-dark-section-hover: #2D4156;
    --cta-surface-gradient-light-bg: linear-gradient(to right, var(--cta-on-light-section-hover) 50%, var(--color-brand) 50%);
    --cta-surface-gradient-dark-bg: linear-gradient(to right, var(--cta-on-dark-section-hover) 50%, var(--milk-white) 50%);

    --button-bg: transparent;
    --button-border: #0D1B2A;
    --button-color: #0D1B2A;
    --button-hover-bg: #0D1B2A;
    --button-hover-border: #0D1B2A;
    --button-hover-color: #FFFFFF;

    --cta-radius: 4px;

    --header-bg: var(--milk-white);
    --header-border: rgba(13, 27, 42, 0.12);
    --footer-bg: #121212;
    --footer-border: rgba(255, 255, 255, 0.1);
    --footer-text: rgba(255, 255, 255, 0.88);
    --footer-text-muted: rgba(255, 255, 255, 0.55);
    --cookie-banner-bg: rgba(18, 18, 18, 0.7);

    --divider-color: rgba(13, 27, 42, 0.2);
    --card-border-gradient: linear-gradient(to top, rgba(13, 27, 42, 0.35) 0%, transparent 80%);

    --input-bg: rgba(255, 255, 255, 0.95);
    --input-border: rgba(13, 27, 42, 0.2);
    --input-color: #0D1B2A;
    --input-placeholder: rgba(13, 27, 42, 0.45);
    --form-container-bg: rgba(255, 255, 255, 0.96);
    --form-section-overlay: linear-gradient(rgba(255, 255, 255, 0.45), rgba(229, 232, 236, 0.95));

    --hero-overlay: linear-gradient(rgba(13, 27, 42, 0.25), rgba(255, 255, 255, 0.88));
    --hero-text-color: #0D1B2A;
    --hero-text-shadow: 0 2px 12px rgba(255, 255, 255, 0.85);

    --caramel: #2C353F;
    --modal-overlay: rgba(13, 27, 42, 0.65);
    --modal-close-color: #2C353F;
}

@supports (height: 100svh) {
    :root {
        --hero-section-viewport-h: 100svh;
    }
}

@media (max-width: 768px) {
    :root {
        /* Single-row header + burger */
        --header-height: 68px;
        --hero-header-offset: var(--header-height);
    }
}