/**
 * ==================================================
 * BASE
 * Francesco Cugini Theme
 * Design System v1.0
 * ==================================================
 */

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

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

/*==================================================
HTML
==================================================*/

html{

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

}

/*==================================================
BODY
==================================================*/

body{

    background:var(--color-background);

    color:var(--color-text);

    font-family:var(--font-body);

    font-size:var(--font-size-base);

    line-height:var(--line-height);

    font-weight:400;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    overflow-x:hidden;

}

/*==================================================
SECTIONS
==================================================*/

section{

    padding:var(--section-space) 0;

    position:relative;

}

/*==================================================
MEDIA
==================================================*/

img,
picture,
video,
canvas,
svg{

    display:block;

    max-width:100%;

    height:auto;

}

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

a{

    color:inherit;

    text-decoration:none;

    transition:color var(--transition),
               opacity var(--transition);

}

a:hover{

    color:var(--color-accent);

}

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

button{

    font:inherit;

    background:none;

    border:none;

    cursor:pointer;

}

/*==================================================
FORMS
==================================================*/

input,
textarea,
select{

    font:inherit;

    color:inherit;

}

/*==================================================
LISTS
==================================================*/

ul,
ol{

    list-style:none;

}

/*==================================================
TABLES
==================================================*/

table{

    width:100%;

    border-collapse:collapse;

}

/*==================================================
HR
==================================================*/

hr{

    border:none;

    border-top:1px solid var(--color-border);

    margin:var(--space-2xl) 0;

}

/*==================================================
SELECTION
==================================================*/

::selection{

    background:var(--color-gold);

    color:#fff;

}

/*==================================================
FOCUS
==================================================*/

:focus-visible{

    outline:2px solid var(--color-accent);

    outline-offset:3px;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--color-surface-alt);

}

::-webkit-scrollbar-thumb{

    background:var(--color-gold);

    border-radius:var(--radius-round);

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-accent);

}

/*==================================================
ACCESSIBILITY
==================================================*/

@media (prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

    }

}