/* ========================================
   VTX Semantic Design Tokens

   Source:
   Blocksy Global Color Palette

   Purpose:
   Provides semantic variables for
   VTX website components.

======================================== */


:root {

    --vtx-breakpoint-tablet:999px;

    --vtx-breakpoint-mobile:767px;

     /* =====================================
       Header
    ===================================== */

    --vtx-header-height-desktop:80px;

    --vtx-header-height-tablet:72px;

    --vtx-header-height-mobile:64px;
    
    /* =====================================
       Brand Colors
    ===================================== */


    /**
     * Primary Brand Navy
     * Used for:
     * - Header
     * - Footer
     * - Primary dark sections
     */
    --vtx-primary-navy:
        var(--theme-palette-color-1);



    /**
     * Brand Yellow
     * Used for:
     * - Primary buttons
     * - Accent elements
     */
    --vtx-brand-yellow:
        var(--theme-palette-color-2);



    /**
     * White
     * Used for:
     * - Text on dark background
     * - Hero sections
     * - Dark components
     */
    --vtx-white:
        var(--theme-palette-color-3);



    /* =====================================
       Typography Colors
    ===================================== */


    /**
     * Heading Color
     */
    --vtx-heading:
        var(--theme-palette-color-4);



    /**
     * Muted Text
     */
    --vtx-muted:
        var(--theme-palette-color-5);



    /**
     * Light Text
     * Used for:
     * - Dark background paragraphs
     * - Hero supporting text
     */
    --vtx-text-light:
        var(--theme-palette-color-6);



    /* =====================================
       Surface Colors
    ===================================== */


    /**
     * Border / Divider
     */
    --vtx-border:
        var(--theme-palette-color-6);



    /**
     * Base Background
     */
    --vtx-background:
        var(--theme-palette-color-7);


    /**
     * Dark Section Background
     */
    --vtx-color-dark-section: #263A63;

    /**
     * Muted Section Background
     */
    --vtx-color-muted-section: #F2F3EF;


    /**
     * Accent Hover
     */
    --vtx-yellow-hover:
        var(--theme-palette-color-8);



    /* =====================================
       Component Tokens
    ===================================== */


    /**
     * Dark Overlay
     * Used for:
     * - Hero photography sections
     * - Dark image sections
     */
    --vtx-overlay-dark:
        rgba(15, 30, 55, 0.45);

    
    --vtx-color-eyebrow:
        var(--theme-palette-color-5);



    /**
     * Content Width
     * Used for:
     * - Hero text
     * - Editorial sections
     */
    --vtx-content-width:
        760px;



    /* =====================================
       Motion Tokens
    ===================================== */


    /**
     * Slow Motion
     * Used for:
     * - Hero background zoom
     */
    --vtx-motion-slow:
        18s;

}