/*------------------------------------*\
  #BASE ELEMENTS
\*------------------------------------*/

/* Typefaces */
@font-face {
    /* Fraunces */
}
@font-face {
    /* IBM Plex Serif */
}
@font-face {
    /* Inter */
}
@font-face {
    /* JetBrains Mono */
}
/* (Copy font-face declarations from your original) */

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}
h1 {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
}
h2 {
    font-size: var(--font-size-lg);
}
h3 {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
}
h4,
h5,
h6 {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
}

code,
pre,
kbd {
    font-family: var(--font-mono);
}

a {
    transition: color 0.3s ease;
    cursor: pointer;
}
a:hover,
a:focus {
    color: var(--color-text-light);
}
a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}