/**
 * Base elements
 */

html {
    color-scheme: light;
    background: var(--hemik-color-canvas);
}

body {
    margin: 0;
    background:
        linear-gradient(
            180deg,
            var(--hemik-color-background) 0%,
            var(--hemik-color-surface-muted) 100%
        );
}

a {
    color: var(--hemik-color-brand);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    transition:
        color var(--hemik-duration-fast) var(--hemik-ease-standard),
        text-decoration-color var(--hemik-duration-fast) var(--hemik-ease-standard);
}

a:hover {
    color: var(--hemik-color-action-hover);
}

a:focus-visible {
    outline: 3px solid transparent;
    border-radius: var(--hemik-radius-sm);
    box-shadow: var(--hemik-shadow-focus);
}

hr {
    height: 1px;
    margin-block: var(--hemik-space-8);
    border: 0;
    background: var(--hemik-color-border);
}

ul,
ol {
    padding-inline-start: 1.35em;
}

li + li {
    margin-block-start: var(--hemik-space-2);
}

img {
    border-radius: var(--hemik-radius-sm);
}

figure {
    max-width: 100%;
}

table {
    width: 100%;
    border: var(--hemik-border);
    background: var(--hemik-color-surface);
}

th,
td {
    padding: var(--hemik-space-3) var(--hemik-space-4);
    border-block-end: var(--hemik-border);
    text-align: start;
    vertical-align: top;
}

th {
    color: var(--hemik-color-text);
    background: var(--hemik-color-brand-subtle);
    font-weight: var(--hemik-font-weight-semibold);
}

tr:last-child td {
    border-block-end: 0;
}

input,
textarea,
select,
button {
    color: inherit;
}

input,
textarea,
select {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.7rem 0.85rem;
    border: var(--hemik-border);
    border-radius: var(--hemik-radius-md);
    outline: 0;
    background: var(--hemik-color-surface);
    transition:
        border-color var(--hemik-duration-fast) var(--hemik-ease-standard),
        box-shadow var(--hemik-duration-fast) var(--hemik-ease-standard);
}

textarea {
    min-height: 8rem;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--hemik-color-action);
    box-shadow: var(--hemik-shadow-focus);
}

::placeholder {
    color: var(--hemik-color-text-muted);
    opacity: 0.9;
}

button {
    border: 0;
}

address {
    font-style: normal;
}

mark {
    padding-inline: 0.18em;
    color: var(--hemik-color-text);
    background: var(--hemik-color-brand-soft);
}

abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.15em;
    cursor: help;
}