/* ==========================================================
   PAOREEL STUDIOS V3
   VARIABLES
   ========================================================== */

:root {

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

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

    --color-text: #111111;
    --color-light-text: #8a8a8a;

    --color-border: #e8e8e8;
    --color-background: #ffffff;

    --color-overlay: rgba(0, 0, 0, 0.25);



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

    --font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

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



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

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.5rem;

    --fs-display: clamp(4rem, 10vw, 9rem);



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

    --lh-tight: 0.92;
    --lh-normal: 1.5;
    --lh-loose: 1.8;



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

    --tracking-tight: -0.05em;
    --tracking-normal: 0;
    --tracking-wide: 0.12em;



    /* ======================================================
       LAYOUT
    ====================================================== */

    --site-width: 1800px;

    --header-height: 90px;

    --section-padding: 8rem;
    --content-padding: 4rem;



    /* ======================================================
       GALLERY
    ====================================================== */

    --gallery-height: 650px;

    --gallery-image-width: 420px;

    --gallery-caption-gap: 16px;



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

    --radius-none: 0;
    --radius-sm: 4px;



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

    --transition-fast: 0.25s ease;

    --transition-medium: 0.45s ease;

    --transition-slow: 0.8s cubic-bezier(0.22, 1, 0.36, 1);



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

    --z-loader: 9999;
    --z-header: 500;
    --z-overlay: 300;
    --z-content: 100;

}