:root {
/* ===================================================
   MAIN VISUAL
=================================================== */

    /* Colors */
    --color-text: #111;
    --color-white: #fff;
    --color-muted: #767575;
    --color-border: #eee;
    --color-main-visual-media-bg: #2a2a2a;
    --color-footer-bg: #1a1a1a;
    --color-footer-text: #b0b0b0;
    --color-footer-heading: #fff;


      /* ==========================================
       Layout
    ========================================== */

    --container-main:80px;
    --container-sub:245px;

    --section-space:150px;

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

    --header-height:100px;

    /* ==========================================
       Footer
    ========================================== */

    --footer-height:90px;

    /* ==========================================
       Transition
    ========================================== */

    --transition:.4s ease;


    /* Brand */
    --color-primary: #0090D4;

    /* Layout */
    --header-height: 90px;
    --header-logo-width: 191px;
    --container-padding: 40px;
    /* --container-max-width: 1840px;*/
    --layout-min-width: 1280px;
    --main-visual-project-max-width: 420px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 48px;
    --header-nav-gap: 72px;
    --footer-inner-gap: 48px;

    /* Opacity */
    --opacity-muted: 0.8;
    --opacity-subtle: 0.85;

    /* Z-index */
    --z-index-base: 0;
    --z-index-main-visual-overlay: 1;

    /* Animation (future use: transform and opacity only) */
    --animation-duration-fast: 300ms;
    --animation-duration-base: 600ms;
    --animation-duration-slow: 900ms;
    --animation-easing-base: ease;
    --animation-easing-in-out: ease-in-out;
}