/* ==========================================================================
   Rao Nete Website
   variables.css
   Version: 1.0
   ========================================================================== */


/* ==========================================================================
   ROOT VARIABLES
   ========================================================================== */

:root {

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

    --color-forest: #0D2B1E;
    --color-deep-moss: #173828;
    --color-card: #224232;
    --color-ivory: #F4F1E8;
    --color-gold: #C89C3D;
    --color-terracotta: #D97A4A;
    --color-river: #3AA8C8;

    /* ==========================================================
       EXTENDED COLOR PALETTE
       ========================================================== */

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

    --color-text: #F4F1E8;
    --color-text-dark: #173828;

    --color-heading: #FFFFFF;
    --color-muted: rgba(244, 241, 232, 0.75);

    --color-border: rgba(255,255,255,0.08);
    --color-border-light: rgba(255,255,255,0.15);

    --color-overlay-dark: rgba(0,0,0,0.45);
    --color-overlay-heavy: rgba(0,0,0,0.65);

    --color-glass: rgba(23,56,40,0.72);

    --color-shadow-light: rgba(0,0,0,.10);
    --color-shadow-medium: rgba(0,0,0,.18);
    --color-shadow-heavy: rgba(0,0,0,.35);

    --color-success: #3F8C54;
    --color-warning: #D9A441;
    --color-error: #C74A4A;

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

    --font-heading: "Cormorant Garamond", serif;
    --font-body: "Inter", sans-serif;

    /* ==========================================================
       FONT WEIGHTS
       ========================================================== */

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ==========================================================
       FONT SIZES
       ========================================================== */

    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.75rem;
    --text-4xl: 3.75rem;
    --text-5xl: 5rem;

    /* ==========================================================
       LINE HEIGHT
       ========================================================== */

    --leading-tight: 1.1;
    --leading-heading: 1.2;
    --leading-body: 1.75;
    --leading-loose: 2;

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

    --tracking-tight: -.02em;
    --tracking-normal: 0;
    --tracking-wide: .08em;
    --tracking-extra: .18em;

    /* ==========================================================
       SPACING SCALE
       (Based on UI Kit)
       ========================================================== */

    --space-0: 0;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --space-96: 96px;
    --space-128: 128px;
    --space-160: 160px;

    /* ==========================================================
       CONTAINER
       ========================================================== */

    --container-width: 1280px;
    --container-padding: 32px;

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

    --header-height: 96px;

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

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

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

    --border-width: 1px;
    --border-color: var(--color-border);

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

    --shadow-sm: 0 4px 12px rgba(0,0,0,.08);

    --shadow-md: 0 12px 30px rgba(0,0,0,.12);

    --shadow-lg: 0 25px 60px rgba(0,0,0,.22);

    --shadow-xl: 0 40px 90px rgba(0,0,0,.32);

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

    --transition-fast: .2s ease;

    --transition-base: .35s ease;

    --transition-slow: .6s ease;

    /* ==========================================================
       Z-INDEX
       ========================================================== */

    --z-background: -1;
    --z-default: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-overlay: 1500;
    --z-modal: 2000;
    --z-tooltip: 3000;

    /* ==========================================================
       BUTTONS
       ========================================================== */

    --button-height: 56px;
    --button-padding-x: 32px;

    /* ==========================================================
       INPUTS
       ========================================================== */

    --input-height: 56px;

    /* ==========================================================
       HERO
       ========================================================== */

    --hero-min-height: 100vh;

    /* ==========================================================
       MAX CONTENT WIDTHS
       ========================================================== */

    --content-width: 760px;
    --reading-width: 720px;

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 992px) {

    :root {

        --container-padding: 24px;

        --text-5xl: 4rem;
        --text-4xl: 3.25rem;
        --text-3xl: 2.5rem;
        --text-2xl: 1.8rem;

        --header-height: 88px;

    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    :root {

        --container-padding: 20px;

        --text-5xl: 3rem;
        --text-4xl: 2.5rem;
        --text-3xl: 2rem;
        --text-2xl: 1.6rem;
        --text-xl: 1.35rem;
        --text-lg: 1.125rem;

        --space-96: 72px;
        --space-128: 96px;
        --space-160: 120px;

        --header-height: 80px;

    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    :root {

        --container-padding: 16px;

        --button-height: 52px;

    }

}


/* ==========================================================================
   END OF FILE
   ========================================================================== */