/* === OWNER STYLES === */
:root {
    --max-width: 980px;
    --modal-max-width: 940px;
    --main-padding: 3rem 0 0 0;
    --gap: 0.5rem;
    --padding: 5px 10px;

    --transition-all: all 0.3s ease;

    --radius: 0.3rem;


    --shadow: 0 2px 4px rgba(0, 0, 0, 0.4);

    /* --- TXT WEIGHT --- */
    --txt-400: 400;
    --txt-600: 600;
    --txt-800: 800;

    /* === COLORS === */
    /* --- ZEN --- */
    --color-1: hsl(180 100% 100%);
    --color-1-a: hsl(180, 100%, 100%, 0);
    --color-2: hsl(28 15% 83%);
    --color-3: hsl(26 22% 45%);;
    --color-4: hsl(26 32% 35%);
    --color-4-a: hsla(26, 32%, 35%, 0.1);


    /* --- */
    --color-white: hsl(20 27% 96%);
    --color-black: hsl(0, 0%, 5%);


    /* === COMPONENTS === */
    /* --- BACKGROUND --- */
    --bkg-body: var(--color-1);
    --bkg-header: var(--color-1-a);
    --bkg-main: var(--color-1);
    --bkg-footer: var(--color-4);
    --bkg-linear-4-3: linear-gradient(45deg, var(--color-4) 40%, var(--color-3) 100%);

    /* --- TXT --- */
    --txt-white: var(--color-white);
    --txt-black: var(--color-black);
    --txt-color-1: var(--color-1);
    --txt-color-2: var(--color-2);
    --txt-color-3: var(--color-3);
    --txt-color-4: var(--color-4);

    --txt-body: var(--color-black);

    /* --- FILL --- */
    --fill-black : var(--color-black);
    --fill-white : var(--color-white);
    --fill-color-1: var(--color-1);
    --fill-color-2: var(--color-2);
    --fill-color-3: var(--color-3);
    --fill-color-4: var(--color-4);

    /* --- BUTTONS SVG --- */
    --btn-svg-bkg: var(--color-4);
    --btn-svg-fill: var(--color-white);
    --btn-svg-width: 1.5rem;
    --btn-svg-radius: 50%;

    --btn-txt-bkg: var(--color-4);
    --btn-txt-svg-bkg: var(--color-white);
    --btn-txt-svg-fill: var(--color-4);
    --btn-txt-radius: 0.3rem;
    --btn-txt-svg-radius: 50%;

    /* --- LOGO --- */
    --logo-width: 2rem;
    --logo-fill: hsl(0, 0%, 0%);;

    /* --- IMAGES URL --- */
    --img-hero-01: url('../../owner/assets/webp/img_01.webp');

    /* --- VIDEOS --- */
    --video-hero-01: url('../../owner/assets/mp4/hero_01.mp4');
    --video-hero-bkg: hsl(20 27% 96%);
    --video-hero-radius: 0.3rem;
}

:root.grey {
    --color-1: hsl(36 32% 80%);
    --color-2: hsl(23 36% 70%);
    --color-3: hsl(11 33% 54%);
    --color-4: hsl(358 27% 35%);
}