:root {
    --font-latin: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-arabic: 'Cairo', 'Tajawal', sans-serif;
    --font-arabic-heading: 'Cairo', 'Tajawal', var(--font-arabic);
    
    --c-white: #ffffff;
    --c-black: #000000;
    --c-active: rgba(172, 0, 19, 1);
    /* Nav link hover + current page (match home header); override on .site-tone-blue */
    --c-nav-accent: var(--c-active);
    /* Legacy name used in Tailwind arbitrary classes — keep in sync with nav accent */
    --c-blue-active: var(--c-nav-accent);
    --c-accent: #D4AF37;
    --c-accent-light: #FFD700;
    --c-button-bg: rgba(212, 175, 55, 1);
    --c-bg-dark: rgba(15, 0, 0, 1);
    /* Used by packaging-single / chips-single page shells */
    --bg-dark: var(--c-bg-dark);
    /* --c-bg-footer: linear-gradient(180deg, #0a1a4a 0%, #051030 100%); */
    --c-bg-gradient: linear-gradient(270deg, 
        rgba(185, 1, 23, 0.6) 0%, 
        #840010 0.01%, 
        #3B0310 47.12%, 
        #0F0000 99.99%
    );

    
    --c-about-bg: rgba(71, 2, 10, 1);
    
    /* NEW: Blue vertical gradient for sections (Figma: 180deg, 4 stops) */
    --c-bg-blue-gradient: linear-gradient(180deg, 
        rgba(111, 173, 237, 0.6) 0%, 
        #1E5A8A 40.87%, 
        #0F2A44 69.23%, 
        #0A1020 99.99%
    );
    
    --c-text-primary: rgba(255, 255, 255, 1);
    --c-text-active: #006aff;
    
    --c-chip-bg-gradient: linear-gradient(118.68deg, rgba(225,225,225,0) 8.25%, rgba(6,42,251,0.44) 20.76%, rgba(255,255,255,0.44) 94.98%);
    --c-chip-border-gradient: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0) 17.31%, rgba(255,255,255,0) 86.54%, #FFFFFF 100%);
    --c-chip-btn-bg: linear-gradient(179.51deg, #FFFFFF -13.95%, rgba(255,255,255,0.23) 113.94%);
    --c-chip-btn-border: rgba(255,255,255,0.45);
    --c-chip-mobile-fade: rgba(1, 6, 29, 0.9);

    --header-max-width: 100%;
    --header-min-height: 802px;
    --header-top-gap: 40px;
    --header-border: 1px;
    
    --nav-top: calc(72px - var(--header-top-gap));
    --nav-start: 35px;
    --nav-end: 5%;
    --nav-gap: 25px;
    
    --clip-p1-x: 0%; --clip-p1-y: 13%;
    --clip-p2-x: 63%; --clip-p2-y: 13%;
    --clip-p3-x: 68%; --clip-p3-y: 0%;
    --clip-p4-x: 100%; --clip-p4-y: 0%;
    --clip-p5-x: 100%; --clip-p5-y: 88%;
    --clip-p6-x: 62%; --clip-p6-y: 88%;
    --clip-p7-x: 53%; --clip-p7-y: 100%;
    --clip-p8-x: 0%; --clip-p8-y: 100%;
    
    --logo-width: 67px;
    --logo-height: 61px;
    --logo-top: 63px;
    --logo-right: 3%;
    --lang-icon-size: 40px;

    /* Header specific */
    --header-nav-width: 818px;
    --header-nav-height: 40px;
    --header-logo-width: 82px;
    --header-logo-height: 75px;
    --header-logo-top: 19px;
    --header-logo-left: 37px;
    --header-nav-top: 36px;

    --header-blur-bg: linear-gradient(179.95deg, #540913 0.01%, rgba(255, 255, 255, 0) 49.98%, #6D3239 99.95%);
    --header-bg-img: url('/assests/img/home.png');
    --header-bg-img-sm: url('/assests/img/home-bg-sm-2.png');
    /* ========== FOOTER BACKGROUND - FIXED ========== */
    --event-bg-img: url('/assests/img/event-2.svg');
    /* Footer gradient base */
    --c-bg-footer-gradient: linear-gradient(180deg, #0a1a4a 0%, #051030 100%);
    
    /* Footer background image (SVG pattern recommended) */
    --c-bg-footer-img: url('/assests/img/footer-pattern-2.svg');
    
    --c-bg-footer: 
        var(--c-bg-footer-gradient),
        var(--c-bg-footer-img);
        
    /* Footer background properties */
    /* --c-bg-footer-size: cover;
    --c-bg-footer-position: bottom right;
    --c-bg-footer-position-sm: center;
    --c-bg-footer-repeat: no-repeat;
    --c-bg-footer-opacity: 0.3; */
    
    /* Combined background (gradient + image) */
    --c-bg-footer-combined: 
        var(--c-bg-footer-gradient),
        var(--c-bg-footer-img);
    
    @media (min-width: 1920px) {
        :root {
            --header-min-height: 900px;
            --nav-top: calc(90px - var(--header-top-gap));
            --logo-width: 80px;
            --logo-height: 73px;
        }
    }

    @media (max-width: 1199.98px) {
        :root {
            --header-min-height: 680px;
            --nav-top: calc(42px - var(--header-top-gap));
            --nav-start: 4%;
            --nav-end: 4%;
            --clip-p1-y: 10%;
            --clip-p2-x: 60%;
            --clip-p2-y: 10%;
            --clip-p3-x: 65%;
            --clip-p5-y: 85%;
            --clip-p6-x: 60%;
            --clip-p6-y: 85%;
            --clip-p7-x: 50%;
        }
    }

    @media (max-width: 991.98px) {
        :root {
            --header-min-height: 600px;
            --nav-top: calc(28px - var(--header-top-gap));
            --nav-start: 3%;
            --nav-end: 3%;
            --clip-p1-y: 8%;
            --clip-p2-x: 55%;
            --clip-p2-y: 8%;
            --clip-p3-x: 60%;
            --clip-p5-y: 82%;
            --clip-p6-x: 55%;
            --clip-p6-y: 82%;
            --clip-p7-x: 48%;
            --logo-width: 54px;
            --logo-height: 50px;
        }
    }

    @media (max-width: 767.98px) {
        :root {
            --header-top-gap: 0;
            --header-min-height: 220px;
            --clip-p1-y: 5%;
            --clip-p2-x: 50%;
            --clip-p2-y: 5%;
            --clip-p3-x: 55%;
            --clip-p5-y: 90%;
            --clip-p6-x: 50%;
            --clip-p6-y: 90%;
            --clip-p7-x: 45%;

            --header-logo-width: 60px;
            --header-logo-height: 55px;
            --header-logo-top: 14px;
            --header-logo-left: 20px;
        }
    }

    @media (max-width: 479.98px) {
        :root {
            --header-min-height: 200px;
            --clip-p1-y: 3%;
            --clip-p2-x: 45%;
            --clip-p2-y: 3%;
            --clip-p3-x: 50%;
            --clip-p5-y: 92%;
            --clip-p6-x: 45%;
            --clip-p6-y: 92%;
            --clip-p7-x: 40%;
        }
    }
}

/*
 * Full blue theme: products routes always; other front pages when session says user came from products.
 * Red/default: packaging routes always; other pages when session says user came from packagings.
 * See RememberFrontSiteTone middleware + new_front/layouts/app.blade.php.
 */
.site-tone-blue {
    --c-nav-accent: var(--c-text-active);
    --c-blue-active: var(--c-nav-accent);

    --c-bg-dark: rgba(4, 10, 28, 1);
    --bg-dark: rgba(4, 10, 28, 1);

    /* Horizontal blue field (replaces maroon --c-bg-gradient on product routes) */
    --c-bg-gradient: linear-gradient(
        270deg,
        rgba(111, 173, 237, 0.55) 0%,
        #1e4f82 22%,
        #0f2d4d 58%,
        #060d18 100%
    );

    --c-about-bg: rgba(12, 36, 62, 0.85);

    /* Header chrome on inner pages */
    --header-blur-bg: linear-gradient(
        179.95deg,
        rgba(20, 55, 95, 0.85) 0.01%,
        rgba(255, 255, 255, 0) 49.98%,
        rgba(30, 70, 110, 0.55) 99.95%
    );

    /* Card / overlay fades tuned for blue page */
    --c-chip-mobile-fade: rgba(4, 10, 28, 0.92);

    /* Home “Our events” hero art: red theme uses event-2.svg on :root; blue uses event.jpg */
    --event-bg-img: url('/assests/img/event.jpg');
}