@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/assets/fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

/* Custom Scrollbar - Architectural Digital */
html {
    scrollbar-color: var(--color-border) var(--color-bg);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-subtle);
}

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

h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-heading);
    color: var(--color-system);
    margin-bottom: var(--space-8);
}

.display { font-size: var(--font-size-display); line-height: var(--line-height-tight); }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

.lead {
    font-size: var(--font-size-lead);
    color: var(--color-text-muted);
    margin-bottom: var(--space-16);
}

p {
    margin-bottom: var(--space-12);
}

.text-meta {
    font-size: var(--font-size-meta);
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

a {
    color: var(--color-system);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    transition: text-decoration-color var(--transition-fast);
}

a:hover, a:focus {
    text-decoration-color: var(--color-system);
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Icons */
.icon {
    display: inline-block;
    width: var(--icon-md);
    height: var(--icon-md);
    stroke: currentColor;
    vertical-align: text-bottom;
}

.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

.icon--success { stroke: var(--color-success); }
.icon--warning { stroke: var(--color-warning); }
.icon--error { stroke: var(--color-error); }