/* ==========================================================
   wine ott
   base.css
   Design System & Grundlagen
========================================================== */


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    min-height:100vh;
}


/* ==========================================================
   DESIGN SYSTEM
========================================================== */

:root{

    /* ------------------------------------------------------
       Farben
    ------------------------------------------------------ */

    --paper:#F7F5F0;
    --white:#FFFFFF;

    --text:#252525;
    --muted:#555555;
    --light:#888888;

    --wine:#6A3643;
    --stone:#90725B;
    --moss:#707B65;

    --accent:var(--wine);

    --line:#E7E0D7;
    --line-soft:rgba(0,0,0,.08);
    --line-faint:rgba(0,0,0,.05);


    /* ------------------------------------------------------
       Layout
    ------------------------------------------------------ */

    --container:1180px;
    --content:720px;
    --content-wide:860px;


    /* ------------------------------------------------------
       Abstände
    ------------------------------------------------------ */

    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:2rem;
    --space-lg:4rem;
    --space-xl:7rem;
    --space-xxl:9rem;


    /* ------------------------------------------------------
       Radius
    ------------------------------------------------------ */

    --radius-sm:12px;
    --radius:20px;
    --radius-lg:28px;


    /* ------------------------------------------------------
       Schatten
    ------------------------------------------------------ */

    --shadow-sm:
        0 10px 30px rgba(0,0,0,.06);

    --shadow:
        0 24px 60px rgba(0,0,0,.08);


    /* ------------------------------------------------------
       Animation
    ------------------------------------------------------ */

    --transition:.35s ease;


    /* ------------------------------------------------------
       Typografie
    ------------------------------------------------------ */

    --font:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    --h1:
        clamp(4.5rem,9vw,8rem);

    --h2-large:
        clamp(2rem,4vw,3rem);

    --h2-medium:
        clamp(2rem,3vw,2.5rem);

    --h2-small:
        clamp(1.9rem,2.8vw,2.3rem);

    --h3:
        1.5rem;

}


/* ==========================================================
   BASE
========================================================== */

body{

    background:var(--paper);
    color:var(--text);

    font-family:var(--font);

    font-size:18px;
    line-height:1.75;

    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;

}


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

h1,
h2,
h3,
h4{

    color:var(--text);

    font-weight:500;

    letter-spacing:-.03em;
    line-height:1.05;

}

h1{

    font-size:var(--h1);

}

h2{

    font-size:var(--h2-large);

    line-height:1.12;

    letter-spacing:-.025em;

    margin-bottom:1.4rem;

}

h3{

    font-size:var(--h3);

    margin-bottom:.75rem;

}

h4{

    font-size:1.1rem;

    margin-bottom:.5rem;

}

p{

    max-width:42rem;

    margin-bottom:1.4rem;

}

strong{

    font-weight:600;

}

small{

    color:var(--light);

}


/* ==========================================================
   LINKS
========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--wine);

}


/* ==========================================================
   LISTEN
========================================================== */

ul,
ol{

    padding-left:1.25rem;

}

li{

    margin-bottom:.5rem;

}


/* ==========================================================
   MEDIEN
========================================================== */

img{

    display:block;

    width:100%;
    height:auto;

}

picture{

    display:block;

}

figure{

    margin:0;

}


/* ==========================================================
   AUSWAHL
========================================================== */

::selection{

    background:rgba(106,54,67,.18);

}