/*
Purpose: Establishes the base look for raw HTML tags before any custom classes are applied.
Key contents: Global body settings, generic link styles, and standardized heading scales (h1 through h6).
Focus: Sets up standard line heights, text colors, and default background behaviors.
*/
body {
    /* display */
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-body);
    /* position */
    /* box-model */
}
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-family: var(--font-pri);
    font-weight: 900;
}
p {
    color: var(--text-muted);
    font-family: var(--font-sec);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--line-height4);
}
span {
    color: var(--text-muted);
    font-family: var(--font-sec);
}
a {
    font-family: var(--font-pri);
    font-weight: 700;
    text-decoration: none;
}
button {
    background: transparent;
    border: none;
}
ul {
    display: flex;
    flex-direction: column;
    list-style: none;
}
hr {
    border: 1px solid var(--gray-a8);
    margin: var(--space-4) 0;
}
details {
    background: var(--gray-a5);
    border: 1px solid var(--gray-a8);
    border-radius: var(--radius-sm);
    color: var(--gray-a12);
    overflow: hidden;

    padding: var(--space-4);
}
details:hover {
    background: var(--gray-a4);
    border: 1px solid var(--gray-a7);
    color: var(--gray-a12);
    cursor: pointer;
    transition: background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out;
}
summary::marker {
    color: var(--gray-a11);
}
summary::-webkit-details-marker {
  display: none;
}
details > summary {
    color: var(--text-pri);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: var(--line-height3);
}
details > p {
}
details:open {
    background: var(--blue-a3);
    border: 1px solid var(--blue-a6);
    color: var(--blue-a12);
    transition: background 0.3s ease-in-out, border 0.3s
}
details:open > summary {
    color: var(--gray-a12);
    margin-bottom: var(--space-3);
}
blockquote {
    background: var(--gray-surface);
    border-left: 8px solid var(--blue-a8);
    border-radius: var(--radius-sm);
}
form {
    background: var(--gray-a2);
    border: 1px solid var(--gray-a8);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}
fieldset {
    border: none;
}
legend {
    color: var(--text);
    font-family: var(--font-pri);
    font-weight: 900;
}
label {
    color: var(--text-muted);
    font-family: var(--font-sec);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--line-height4);
}
input {
    background: var(--blue-a5);
    border: 1px solid var(--blue-a8);
    border-radius: var(--radius-sm);
    color: var(--gray-12);
    font-family: var(--font-sec);
    font-size: var(--text-base);
    line-height: var(--line-height4);
}
input::placeholder {
    color: var(--blue-a11);
    font-size: var(--text-base);
    line-height: var(--line-height4);
}
textarea {
    background: var(--blue-a5);
    border: 1px solid var(--blue-a8);
    border-radius: var(--radius-sm);
    color: var(--gray-12);
    font-family: var(--font-sec);
    font-size: var(--text-base);
    line-height: var(--line-height4);
}
textarea::placeholder {
    color: var(--blue-a11);
    font-size: var(--text-base);
    line-height: var(--line-height4);
}
footer {
    background: var(--gray-a2);
    border-top: 1px solid var(--gray-a6);
}