/* =========================================================
   variable.css
   FlyPrivy Jet — Premium Luxury Aviation Theme
   ========================================================= */

:root {

    /* =========================================================
       GLOBAL BACKGROUND SYSTEM
       ========================================================= */

    /*
       Official FlyPrivy Brand Blue
       Used as the primary identity color.
    */

    --color-bg: #01569C;


    /*
       Brighter illuminated aviation blue.
    */

    --color-bg-secondary: #05406E;


    /*
       Deep aviation midnight blue.
    */

    --color-bg-deep: #031F3B;


    /*
       Rich royal section blue.
    */

    --color-section: #032D56;


    /*
       Main website background.

       Direction:
       TOP LEFT  → #01569C
       CENTER    → #05406E
       LOWER     → #032D56
       BOTTOM RG → #031F3B
    */

    --page-gradient:
        linear-gradient(
            135deg,
            #01569C 0%,
            #05406E 27%,
            #032D56 58%,
            #031F3B 100%
        );


    /*
       Atmospheric blue light.
       Used to create subtle depth without looking neon.
    */

    --gradient-blue-glow:
        radial-gradient(
            ellipse 600px 360px at 72% 18%,
            rgba(55, 155, 205, 0.20),
            rgba(30, 115, 175, 0.08) 45%,
            transparent 75%
        );


    /*
       Secondary atmospheric light.
    */

    --gradient-blue-glow-secondary:
        radial-gradient(
            ellipse 500px 420px at 15% 72%,
            rgba(0, 92, 155, 0.20),
            rgba(0, 70, 125, 0.08) 48%,
            transparent 75%
        );


    /*
       Deep atmospheric shadow toward the lower-right.
       Helps create the luxury / midnight aviation feel.
    */

    --gradient-deep-glow:
        radial-gradient(
            ellipse 700px 500px at 88% 90%,
            rgba(0, 28, 55, 0.42),
            transparent 72%
        );


    /*
       Complete atmospheric page background.

       Use this on the body/root page background
       instead of creating separate background colors
       for individual sections wherever possible.
    */

    --page-background:
        var(--gradient-blue-glow),
        var(--gradient-blue-glow-secondary),
        var(--gradient-deep-glow),
        var(--page-gradient);


    /* =========================================================
       PREMIUM CARD SURFACES
       ========================================================= */

    /*
       PRIMARY CARD SURFACE

       Premium midnight aviation navy.

       The card should clearly separate itself from
       the brighter FlyPrivy blue background without
       looking black.

       Main visual direction:
       TOP/LEFT  → #0B3554
       CENTER    → #082B45
       BOTTOM/RG → #061F35
    */

    --color-card: #1e293b;


    /*
       Slightly lighter elevated card.
       Used for featured cards / image card containers.
    */

    --color-card-elevated: #334155;


    /*
       Hover state.
       Slightly brighter blue while remaining premium.
    */

    --color-card-hover: #475569;


    /*
       Deep premium surface.
       Used where stronger contrast is required.
    */

    --color-card-deep: #0f172a;


    /*
       PRIMARY PREMIUM CARD GRADIENT

       This is the main card treatment.

       It is intentionally subtle:
       - No bright cyan
       - No obvious color banding
       - No neon effect
       - Deep navy luxury appearance

       Direction:
       TOP LEFT → #0B3554
       CENTER   → #082B45
       BOTTOM   → #061F35
    */

    --card-gradient:
        linear-gradient(
            135deg,
            #0B3554 0%,
            #082B45 52%,
            #061F35 100%
        );


    /*
       Elevated / featured card gradient.

       Slightly brighter than the normal card.
       Use for featured content and larger visual cards.
    */

    --card-gradient-elevated:
        linear-gradient(
            135deg,
            #0D3C5D 0%,
            #0A304C 50%,
            #061F35 100%
        );


    /*
       Premium image-card gradient.

       This should sit underneath image overlays
       and provide subtle depth around image content.
    */

    --card-gradient-image:
        linear-gradient(
            145deg,
            #0B3554 0%,
            #082B45 48%,
            #061F35 100%
        );


    /*
       Card inner highlight.

       Creates a very subtle polished surface.
       It should look like soft reflected light,
       not a glassmorphism effect.
    */

    --card-highlight:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.018) 32%,
            transparent 70%
        );


    /*
       Very subtle blue atmospheric light inside cards.

       Gives the navy cards some depth without
       making them glow.
    */

    --card-blue-glow:
        radial-gradient(
            circle at 15% 0%,
            rgba(49, 132, 181, 0.14),
            transparent 55%
        );


    /*
       Combined premium card background.

       Use this if the card CSS supports multiple
       backgrounds.
    */

    --card-background:
        var(--card-highlight),
        var(--card-blue-glow),
        var(--card-gradient);


    /*
       Elevated combined card background.
    */

    --card-background-elevated:
        var(--card-highlight),
        var(--card-blue-glow),
        var(--card-gradient-elevated);


    /*
       Image-card overlay.

       Keeps aircraft photography cinematic while
       preserving the image itself.
    */

    --card-image-overlay:
        linear-gradient(
            180deg,
            rgba(4, 29, 49, 0.04) 0%,
            rgba(4, 29, 49, 0.12) 48%,
            rgba(2, 20, 35, 0.64) 100%
        );


    /*
       Image-card hover overlay.

       Only slightly lifts the image.
       No excessive brightness.
    */

    --card-image-overlay-hover:
        linear-gradient(
            180deg,
            rgba(7, 43, 69, 0.02) 0%,
            rgba(5, 31, 51, 0.08) 48%,
            rgba(2, 19, 33, 0.52) 100%
        );


    /*
       Premium card border.

       Cool steel-blue rather than bright white.
    */

    --card-border:
        1px solid rgba(109, 170, 205, 0.24);


    /*
       Stronger card border for hover.
    */

    --card-border-hover:
        1px solid rgba(139, 195, 224, 0.42);


    /*
       Card top highlight.

       Creates a very subtle polished edge.
    */

    --card-top-highlight:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);


    /*
       Card depth shadow.

       Soft and wide — not a harsh black shadow.
    */

    --card-shadow:
        0 14px 38px rgba(0, 13, 27, 0.30);


    /*
       Hover depth.

       Slight increase in elevation.
    */

    --card-shadow-hover:
        0 18px 46px rgba(0, 12, 25, 0.38);


    /*
       Very subtle blue reflection around cards.
    */

    --card-shadow-blue:
        0 10px 34px rgba(0, 76, 125, 0.16);


    /*
       Image-card shadow.

       Slightly stronger because image cards
       are visually larger.
    */

    --image-card-shadow:
        0 18px 46px rgba(0, 12, 25, 0.34);


    /*
       Image-card hover shadow.
    */

    --image-card-shadow-hover:
        0 22px 54px rgba(0, 12, 25, 0.42);


    /*
       Subtle gold accent shadow.

       Use only on icons / selected accents.
       Do not use as a general card glow.
    */

    --card-gold-glow:
        0 4px 16px rgba(250, 205, 81, 0.10);


    /* =========================================================
       NAVIGATION
       ========================================================= */

    /*
       Dark aviation navigation surface.
       It should blend into the page rather than appear
       as a completely separate blue rectangle.
    */

    --color-nav:
        linear-gradient(
            135deg,
            rgba(1, 70, 119, 0.97) 0%,
            rgba(5, 55, 94, 0.96) 48%,
            rgba(3, 31, 59, 0.98) 100%
        );


    /*
       Navigation shadow.
    */

    --nav-shadow:
        0 8px 30px rgba(0, 0, 0, 0.18);


    /*
       Sticky header drop shadow.
    */

    --shadow-nav:
        0 4px 30px rgba(0, 0, 0, 0.3);


    /* =========================================================
       HEADER
       ========================================================= */

    /*
       Header follows the same diagonal color language
       as the main website.
    */

    --header-gradient:
        linear-gradient(
            135deg,
            rgba(1, 86, 156, 0.97) 0%,
            rgba(7, 72, 125, 0.95) 48%,
            rgba(3, 31, 59, 0.97) 100%
        );


    /* =========================================================
       FOOTER
       ========================================================= */

    /*
       Darker continuation of the main gradient.

       This allows the footer to visually merge into
       the page instead of looking like a separate block.
    */

    --footer-gradient:
        linear-gradient(
            135deg,
            #032D56 0%,
            #064778 38%,
            #032E51 68%,
            #031F3B 100%
        );


    /* =========================================================
       PRIMARY BRAND COLORS
       ========================================================= */

    /*
       Official FlyPrivy logo blue.
    */

    --color-primary: #01569C;


    /*
       Supporting aviation blue.
    */

    --color-royal: #176FA8;


    /*
       Legacy accent — mapped to the golden theme.
    */

    --color-cyan: #FACD51;


    /*
       Darker golden accent.
    */

    --color-cyan-dark: #D9AA32;


    /*
       Light golden accent.
    */

    --color-cyan-light: #FFD866;


    /* =========================================================
       FLYPRIVY BRAND YELLOW / GOLD
       ========================================================= */

    /*
       Primary logo yellow.
       This is the main luxury accent.
    */

    --color-gold: #FACD51;


    /*
       Deeper champagne/gold shade.
    */

    --color-gold-deep: #D9AA32;


    /*
       Main accent.
    */

    --color-accent: #FACD51;


    /*
       Slightly deeper hover state.
    */

    --color-accent-hover: #E8B93F;


    /*
       Compatibility variable.
    */

    --color-bronze: #D9AA32;


    /*
       Gold gradient for premium buttons,
       CTA elements and selected highlights.

       Do NOT use this across large areas.
    */

    --gold-gradient:
        linear-gradient(
            135deg,
            #FACD51 0%,
            #FFD866 48%,
            #D9AA32 100%
        );


    /* =========================================================
       TYPOGRAPHY COLORS
       ========================================================= */

    /*
       Primary white.
    */

    --color-text: #F7FAFC;


    /*
       Soft white-blue.
    */

    --color-text-soft: #C7D5E2;


    /*
       Muted text.
    */

    --color-text-muted: #91A8BB;


    /*
       Strong heading shadow.

       Use sparingly on large headings over blue.
    */

    --text-shadow-heading:
        0 3px 12px rgba(0, 20, 40, 0.38);


    /*
       Subtle body text shadow.
    */

    --text-shadow-body:
        0 1px 5px rgba(0, 20, 40, 0.22);


    /*
       Gold text shadow.

       Very subtle — should never look neon.
    */

    --text-shadow-gold:
        0 2px 10px rgba(250, 205, 81, 0.18);


    /* =========================================================
       BORDERS
       ========================================================= */

    /*
       Cool golden borders.
    */

    --border-light:
        rgba(250, 205, 81, 0.14);


    --border-medium:
        rgba(250, 205, 81, 0.24);


    --border-strong:
        rgba(250, 205, 81, 0.34);


    /*
       Gold borders.
    */

    --border-gold:
        rgba(250, 205, 81, 0.45);


    --border-gold-strong:
        rgba(250, 205, 81, 0.72);


    /*
       Very subtle dividers.
    */

    --divider:
        rgba(250, 205, 81, 0.10);


    /*
       Stronger luxury divider.
    */

    --divider-gold:
        rgba(250, 205, 81, 0.20);


    /* =========================================================
       CARD-SPECIFIC BORDERS
       ========================================================= */

    /*
       Reference-style card outline.

       Blue-white rather than bright gold.
    */

    --border-card:
        rgba(111, 171, 204, 0.26);


    /*
       Card hover outline.

       Gold appears only during interaction.
    */

    --border-card-hover:
        rgba(250, 205, 81, 0.42);


    /*
       Image card outline.
    */

    --border-image-card:
        rgba(130, 185, 214, 0.30);


    /*
       Image card hover outline.
    */

    --border-image-card-hover:
        rgba(250, 205, 81, 0.48);


    /* =========================================================
       STATUS COLORS
       ========================================================= */

    --color-success: #3EA66A;

    --color-danger: #D85B5B;


    /* =========================================================
       GLASS / SURFACE SYSTEM
       ========================================================= */

    /*
       Dark translucent glass.
    */

    --surface-glass:
        rgba(5, 25, 42, 0.78);


    /*
       Hover glass.
    */

    --surface-hover:
        rgba(10, 48, 75, 0.88);


    /*
       Stronger glass surface.
    */

    --surface-glass-dark:
        rgba(3, 22, 38, 0.88);


    /*
       Lighter glass surface.
    */

    --surface-glass-light:
        rgba(12, 65, 100, 0.58);


    /*
       Premium card glass.

       Slightly transparent so the blue page background
       subtly influences the card.
    */

    --surface-card:
        rgba(7, 42, 69, 0.82);


    /*
       Elevated card glass.
    */

    --surface-card-elevated:
        rgba(9, 51, 81, 0.88);


    /*
       Image card glass overlay.
    */

    --surface-image-card:
        rgba(3, 27, 46, 0.30);


    /* =========================================================
       SHADOWS
       ========================================================= */

    /*
       Small elevation.
    */

    --shadow-sm:
        0 6px 18px rgba(0, 0, 0, 0.18);


    /*
       Medium elevation.
    */

    --shadow-md:
        0 12px 36px rgba(0, 0, 0, 0.24);


    /*
       Large luxury elevation.
    */

    --shadow-lg:
        0 24px 60px rgba(0, 0, 0, 0.30);


    /*
       Extra deep shadow for floating cards.
    */

    --shadow-xl:
        0 30px 80px rgba(0, 0, 0, 0.36);


    /*
       Controlled gold glow.
       Premium rather than neon.
    */

    --shadow-gold:
        0 8px 32px rgba(250, 205, 81, 0.16);


    /*
       Slightly stronger CTA glow.
    */

    --shadow-gold-strong:
        0 10px 34px rgba(250, 205, 81, 0.24);


    /*
       Gold CTA button shadow.
    */

    --shadow-btn-gold:
        0 8px 28px rgba(250, 205, 81, 0.20);


    /*
       Hero gold text shadow.
    */

    --shadow-hero-gold-text:
        0 3px 12px rgba(0, 20, 40, 0.20);


    /*
       Hero white heading shadow.
    */

    --shadow-hero-white-text:
        0 2px 8px rgba(0, 20, 40, 0.30);


    /*
       Small body text shadow.
    */

    --shadow-small-text:
        0 1px 5px rgba(0, 20, 40, 0.22);


    /*
       Blue atmospheric shadow.
    */

    --shadow-blue:
        0 12px 40px rgba(0, 70, 125, 0.20);


    /* =========================================================
       PREMIUM CARD SHADOW SYSTEM
       ========================================================= */

    /*
       Default reference-style card shadow.

       Deep enough to lift the navy card from
       the brighter blue website background.
    */

    --shadow-card:
        0 10px 30px rgba(1, 19, 35, 0.28),
        0 2px 8px rgba(0, 0, 0, 0.12);


    /*
       Card hover shadow.
    */

    --shadow-card-hover:
        0 16px 40px rgba(1, 18, 34, 0.36),
        0 0 20px rgba(23, 111, 168, 0.10);


    /*
       Image card shadow.
    */

    --shadow-image-card:
        0 16px 42px rgba(0, 12, 25, 0.34);


    /*
       Image card hover.
    */

    --shadow-image-card-hover:
        0 20px 48px rgba(0, 12, 25, 0.40),
        0 0 24px rgba(23, 111, 168, 0.12);


    /*
       Subtle gold accent on card interaction.
       Keep extremely controlled.
    */

    --shadow-card-gold:
        0 0 18px rgba(250, 205, 81, 0.08);


    /* =========================================================
       TYPOGRAPHY
       ========================================================= */

    --font-heading:
        'Oswald',
        sans-serif;


    --hero-font-size: 72px;

    --hero-font-weight: 700;

    --hero-line-height: 1.05;


    --display-font-size: 56px;

    --display-font-weight: 600;

    --display-line-height: 1.08;


    --headline-lg-font-family:
        'Oswald',
        sans-serif;

    --headline-lg-font-size: 52px;

    --headline-lg-font-weight: 600;

    --headline-lg-line-height: 1.1;

    --headline-lg-letter-spacing: -0.02em;


    --headline-md-font-family:
        'Oswald',
        sans-serif;

    --headline-md-font-size: 35px;

    --headline-md-font-weight: 600;

    --headline-md-line-height: 1.2;


    --headline-sm-font-size: 26px;

    --headline-sm-font-weight: 500;

    --headline-sm-line-height: 1.25;


    /* =========================================================
       BODY
       ========================================================= */

    --font-body:
        'IBM Plex Sans',
        sans-serif;


    --body-lg-font-family:
        'IBM Plex Sans',
        sans-serif;

    --body-lg-font-size: 18px;

    --body-lg-font-weight: 400;

    --body-lg-line-height: 1.6;


    --body-md-font-family:
        'IBM Plex Sans',
        sans-serif;

    --body-md-font-size: 16px;

    --body-md-font-weight: 400;

    --body-md-line-height: 1.65;


    --body-sm-font-size: 14px;

    --body-sm-line-height: 1.55;


    /* =========================================================
       LABELS
       ========================================================= */

    --font-label:
        'Courier Prime',
        monospace;


    --label-md-font-family:
        'Courier Prime',
        monospace;

    --label-md-font-size: 14px;

    --label-md-font-weight: 400;

    --label-md-font-line-height: 1.4;

    --label-md-letter-spacing: 0.05em;


    --label-sm-font-size: 12px;

    --label-sm-letter-spacing: 0.08em;


    /* =========================================================
       BORDER RADIUS
       ========================================================= */

    --radius-sm: 8px;

    --radius-md: 16px;

    --radius-lg: 18px;

    --radius-xl: 40px;


    /* =========================================================
       SPACING
       ========================================================= */

    --space-xs: 8px;

    --space-sm: 16px;

    --space-md: 24px;

    --space-lg: 40px;

    --space-xl: 64px;

    --space-2xl: 96px;


    /* =========================================================
       OVERLAYS
       ========================================================= */

    /*
       Light overlay.
    */

    --overlay-light:
        rgba(4, 55, 96, 0.28);


    /*
       Medium overlay.
    */

    --overlay-medium:
        rgba(3, 43, 78, 0.58);


    /*
       Heavy overlay.
    */

    --overlay-heavy:
        rgba(2, 30, 57, 0.84);


    /*
       Blue image overlay.
       Useful for maintaining brand consistency
       over aircraft photography.
    */

    --overlay-brand:
        rgba(1, 67, 116, 0.26);


    /*
       Dark cinematic image overlay.
    */

    --overlay-cinematic:
        rgba(2, 22, 39, 0.38);


    /*
       Premium image-card cinematic overlay.

       Darkens the lower image area for readable
       labels without destroying the photograph.
    */

    --overlay-image-card:
        linear-gradient(
            180deg,
            rgba(2, 25, 43, 0.00) 0%,
            rgba(2, 25, 43, 0.04) 40%,
            rgba(2, 20, 35, 0.58) 100%
        );


    /*
       Image-card top atmospheric tint.
    */

    --overlay-image-card-top:
        linear-gradient(
            180deg,
            rgba(15, 74, 111, 0.14) 0%,
            transparent 45%
        );


    /* =========================================================
       DECORATIVE ELEMENTS
       ========================================================= */

    /*
       Subtle gold aviation-line color.
    */

    --decorative-blue:
        rgba(250, 205, 81, 0.18);


    /*
       Stronger decorative gold line.
    */

    --decorative-blue-strong:
        rgba(250, 205, 81, 0.28);


    /*
       Gold decorative line.
    */

    --decorative-gold:
        rgba(250, 205, 81, 0.72);


    /*
       Very subtle gold atmospheric glow.
    */

    --decorative-gold-glow:
        rgba(250, 205, 81, 0.12);


    /* =========================================================
       CARD DECORATIVE EFFECTS
       ========================================================= */

    /*
       Very subtle blue edge highlight.
    */

    --card-edge-glow:
        0 0 0 1px rgba(102, 166, 202, 0.08);


    /*
       Premium gold hover edge.
       This should appear only on interaction.
    */

    --card-edge-gold-hover:
        0 0 0 1px rgba(250, 205, 81, 0.18);


    /*
       Subtle internal card shine.
    */

    --card-inner-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16);


    /*
       Image card internal depth.
    */

    --image-card-inner-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22);


    /*
       Premium image-card border glow.
       Very restrained so the photograph remains dominant.
    */

    --image-card-edge:
        0 0 0 1px rgba(130, 185, 214, 0.08);


    /*
       Image-card gold hover edge.
    */

    --image-card-edge-hover:
        0 0 0 1px rgba(250, 205, 81, 0.16);


    /* =========================================================
       CTA SYSTEM
       ========================================================= */

    --cta-background:
        var(--gold-gradient);


    --cta-text:
        #071A29;


    --cta-shadow:
        0 10px 30px rgba(250, 205, 81, 0.20);


    --cta-shadow-hover:
        0 14px 38px rgba(250, 205, 81, 0.28);


    /* =========================================================
       TRANSITIONS
       ========================================================= */

    --transition-fast:
        0.2s ease;


    --transition-normal:
        0.3s ease;


    --transition-slow:
        0.5s cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        );
}