@layer base {
    * {
        box-sizing: border-box  ;
    }

    html {
        scroll-behavior: smooth;
    }
    
    body {
        margin: 0;
        padding: 0;
        font-family: var(--font-arimo);
        font-size: var(--font-size-md);
        line-height: var(--line-height-md);
        color: var(--color-text-base);
        background-color: var(--color-bg-base);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-gelasio);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-base);
        margin: 0;
        padding: 0;
    }

    p {
        font-family: var(--font-arimo);
        font-size: var(--font-size-md);
        line-height: var(--line-height-md);
        color: var(--color-text-base);
        margin: 0;
        padding: 0;
    }

    a {
        color: var(--color-accent-base);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

    a:hover {
        color: var(--color-accent-hover);
    }

    a:active {
        color: var(--color-accent-active);
    }

    a:focus {
        color: var(--color-accent-focus);
    }

    a:disabled {
        color: var(--color-accent-disabled);
        cursor: not-allowed;
    }

    hr {
        border: none;
        border-top: 1px solid var(--color-border-base);
        margin: 0;
        padding: 0;
    }

    /* Inputs & Fields */
    input, textarea, select {
        border: 1px solid var(--color-border-base);
        border-radius: var(--border-radius-md);
    }

    /* Images */
    img {
        border-radius: var(--border-radius-sm);
    }
   
}