/* ====================================================
   SHANEXWEBCO - GLOBAL DESIGN SYSTEM
   Brand: Developing Dynamic Web Experiences
   Premium Navy + Gold + White Theme
   ==================================================== */

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {

    /* ================================================
       01. BRAND COLORS
       ================================================ */

    --color-primary: #092B4C;
    --color-primary-dark: #061B30;
    --color-primary-light: #194C76;
    --color-primary-soft: #EAF2F9;

    --color-secondary: #F0C779;
    --color-secondary-light: #FFE2A6;
    --color-secondary-dark: #C99643;

    --color-white: #FFFFFF;
    --color-black: #101828;


    /* ================================================
       02. BACKGROUND COLORS
       ================================================ */

    --bg-body: #FFFFFF;

    --bg-white: #FFFFFF;
    --bg-light: #F6F9FC;
    --bg-soft: #EFF5FA;
    --bg-cream: #FFFAF2;

    --bg-dark: #061B30;
    --bg-dark-secondary: #092B4C;

    --bg-card: #FFFFFF;
    --bg-card-hover: #F8FBFE;

    --bg-overlay: rgba(3, 17, 32, 0.72);

    --bg-primary-gradient:
        linear-gradient(135deg, #061B30 0%, #123B5E 100%);

    --bg-gold-gradient:
        linear-gradient(135deg, #FFE3AA 0%, #E9B963 100%);


    /* ================================================
       03. HEADER COLORS - LIGHT HEADER
       ================================================ */

    --header-bg: #FFFFFF;
    --header-bg-scrolled: rgba(255, 255, 255, 0.97);

    --header-text: #092B4C;
    --header-text-hover: #C99643;
    --header-active: #092B4C;

    --header-border: #E8EEF4;

    --header-height: 84px;
    --header-height-mobile: 70px;

    --header-shadow:
        0 4px 24px rgba(9, 43, 76, 0.055);


    /* ================================================
       04. FOOTER COLORS - DARK FOOTER
       ================================================ */

    --footer-bg: #061B30;
    --footer-bg-bottom: #041424;

    --footer-heading: #FFFFFF;
    --footer-text: #D3DEE9;

    --footer-link: #D3DEE9;
    --footer-link-hover: #F0C779;

    --footer-border: rgba(255, 255, 255, 0.12);

    --footer-icon: #FFFFFF;
    --footer-icon-hover: #F0C779;


    /* ================================================
       05. TYPOGRAPHY - FONT FAMILY
       ================================================ */

    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Poppins', sans-serif;

    --font-body: var(--font-primary);


    /* ================================================
       06. TYPOGRAPHY - FONT SIZES
       Responsive using clamp()
       ================================================ */

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 17px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;

    --font-size-h1: clamp(36px, 4.2vw, 62px);
    --font-size-h2: clamp(28px, 3vw, 42px);
    --font-size-h3: clamp(22px, 2vw, 28px);
    --font-size-h4: 22px;
    --font-size-h5: 18px;
    --font-size-h6: 16px;

    --font-size-hero-desc: clamp(15px, 1.35vw, 18px);

    --font-size-section-desc: 16px;

    --font-size-card-title: 20px;
    --font-size-card-desc: 14px;

    --font-size-nav: 14px;
    --font-size-footer: 14px;

    --font-size-button: 14px;
    --font-size-label: 12px;

    --font-size-stat: clamp(28px, 3vw, 42px);


    /* ================================================
       07. TYPOGRAPHY - FONT WEIGHTS
       ================================================ */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --weight-body: 400;
    --weight-heading: 700;
    --weight-nav: 500;
    --weight-button: 600;
    --weight-label: 600;


    /* ================================================
       08. TYPOGRAPHY - TEXT COLORS
       ================================================ */

    --text-primary: #092B4C;
    --text-heading: #071F39;
    --text-body: #536477;
    --text-muted: #78879A;

    --text-white: #FFFFFF;
    --text-light: #E4EDF5;

    --text-gold: #C99643;
    --text-link: #092B4C;
    --text-link-hover: #C99643;

    --text-on-gold: #071F39;
    --text-on-navy: #FFFFFF;

    --text-success: #16845A;
    --text-error: #D14343;


    /* ================================================
       09. TYPOGRAPHY - LINE HEIGHT & SPACING
       ================================================ */

    --line-height-body: 1.75;
    --line-height-heading: 1.2;
    --line-height-hero: 1.12;
    --line-height-card: 1.6;

    --letter-spacing-body: 0;
    --letter-spacing-heading: -0.035em;
    --letter-spacing-nav: 0;
    --letter-spacing-button: 0.01em;

    --letter-spacing-label: 0.14em;

    --paragraph-margin: 0 0 20px;


    /* ================================================
       10. BUTTONS - PRIMARY GOLD
       ================================================ */

    --btn-primary-bg: #F0C779;
    --btn-primary-color: #071F39;

    --btn-primary-hover-bg: #DDAE58;
    --btn-primary-hover-color: #071F39;

    --btn-primary-border: #F0C779;

    --btn-primary-shadow:
        0 8px 22px rgba(201, 150, 67, 0.20);


    /* ================================================
       11. BUTTONS - SECONDARY NAVY
       ================================================ */

    --btn-secondary-bg: #092B4C;
    --btn-secondary-color: #FFFFFF;

    --btn-secondary-hover-bg: #194C76;
    --btn-secondary-hover-color: #FFFFFF;

    --btn-secondary-border: #092B4C;


    /* ================================================
       12. BUTTONS - OUTLINE
       ================================================ */

    --btn-outline-bg: transparent;
    --btn-outline-color: #092B4C;
    --btn-outline-border: #092B4C;

    --btn-outline-hover-bg: #092B4C;
    --btn-outline-hover-color: #FFFFFF;

    --btn-outline-light-color: #FFFFFF;
    --btn-outline-light-border: rgba(255,255,255,0.7);


    /* ================================================
       13. BUTTONS - SIZES & SHAPES
       ================================================ */

    --btn-height: 48px;
    --btn-height-sm: 40px;
    --btn-height-lg: 54px;

    --btn-padding-x: 26px;
    --btn-padding-y: 13px;

    --btn-radius: 12px;
    --btn-radius-pill: 100px;

    --btn-font-family: var(--font-primary);
    --btn-font-size: 14px;
    --btn-font-weight: 600;

    --btn-transition: all 0.25s ease;


    /* ================================================
       14. SECTION HEADING / SMALL PILL
       ================================================ */

    --section-label-color: #C99643;
    --section-label-bg: #FFF7E8;

    --section-label-font: var(--font-primary);
    --section-label-size: 12px;
    --section-label-weight: 600;

    --section-label-radius: 100px;
    --section-label-padding: 8px 16px;

    --section-title-color: #071F39;
    --section-description-color: #64748B;

    --section-title-max-width: 820px;
    --section-description-max-width: 650px;

    --section-heading-margin-bottom: 44px;


    /* ================================================
       15. CARD STYLING
       ================================================ */

    --card-bg: #FFFFFF;
    --card-bg-hover: #FFFFFF;

    --card-border: #E9EEF4;
    --card-border-hover: #D2E0EC;

    --card-radius: 18px;
    --card-radius-lg: 24px;

    --card-padding: 28px;

    --card-title-color: #071F39;
    --card-description-color: #64748B;

    --card-shadow:
        0 8px 30px rgba(9, 43, 76, 0.055);

    --card-shadow-hover:
        0 18px 45px rgba(9, 43, 76, 0.11);

    --card-transition: all 0.3s ease;


    /* ================================================
       16. SERVICE ICONS
       ================================================ */

    --icon-bg: #092B4C;
    --icon-color: #F0C779;

    --icon-bg-light: #FFF4DF;

    --icon-size: 50px;
    --icon-radius: 12px;

    --icon-arrow-bg: #F0C779;
    --icon-arrow-color: #071F39;


    /* ================================================
       17. FORM ELEMENTS
       ================================================ */

    --input-bg: #FFFFFF;
    --input-text: #092B4C;

    --input-border: #DCE5EE;
    --input-border-focus: #194C76;

    --input-placeholder: #98A5B3;

    --input-height: 52px;
    --input-radius: 10px;

    --input-padding: 14px 16px;

    --input-shadow-focus:
        0 0 0 3px rgba(25, 76, 118, 0.10);

    --form-label-color: #071F39;
    --form-error-color: #D14343;


    /* ================================================
       18. GLOBAL BORDERS & RADIUS
       ================================================ */

    --border-color: #E8EEF4;
    --border-color-dark: rgba(255,255,255,0.15);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 999px;


    /* ================================================
       19. GLOBAL SHADOWS
       ================================================ */

    --shadow-sm:
        0 2px 10px rgba(9, 43, 76, 0.04);

    --shadow-md:
        0 8px 25px rgba(9, 43, 76, 0.07);

    --shadow-lg:
        0 18px 45px rgba(9, 43, 76, 0.12);

    --shadow-xl:
        0 25px 65px rgba(9, 43, 76, 0.16);


    /* ================================================
       20. SECTION SPACING
       ================================================ */

    --section-padding: 90px;
    --section-padding-lg: 110px;

    --section-padding-mobile: 60px;

    --container-width: 1240px;
    --container-width-wide: 1380px;

    --container-padding: 24px;

    --grid-gap: 24px;
    --grid-gap-lg: 32px;


    /* ================================================
       21. SPACING SYSTEM
       ================================================ */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;


    /* ================================================
       22. HERO SECTION DESIGN TOKENS
       ================================================ */

    --hero-bg: #061B30;

    --hero-title-color: #FFFFFF;
    --hero-highlight-color: #F0C779;

    --hero-description-color: #E0E9F2;

    --hero-min-height: 650px;

    --hero-overlay:
        linear-gradient(
            90deg,
            rgba(4, 20, 36, 0.96) 0%,
            rgba(6, 27, 48, 0.80) 55%,
            rgba(6, 27, 48, 0.18) 100%
        );


    /* ================================================
       23. PORTFOLIO / IMAGE CARDS
       ================================================ */

    --portfolio-bg: #FFFFFF;

    --portfolio-image-radius: 14px;
    --portfolio-card-radius: 18px;

    --portfolio-title-color: #071F39;
    --portfolio-category-color: #78879A;

    --portfolio-overlay:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(4, 20, 36, 0.70) 100%
        );

    --image-hover-scale: 1.04;


    /* ================================================
       24. CTA SECTION
       ================================================ */

    --cta-bg: #061B30;

    --cta-heading-color: #FFFFFF;
    --cta-highlight-color: #F0C779;

    --cta-description-color: #D3DEE9;

    --cta-radius: 24px;


    /* ================================================
       25. TRANSITIONS & ANIMATIONS
       ================================================ */

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    --hover-translate-y: -5px;


    /* ================================================
       26. Z-INDEX SYSTEM
       ================================================ */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;

}