/**
 * Local UI fonts + data-font theme switch.
 * Default pair: Geologica (UI) + Klukva (brand) — Klukva is optically small, so --font-*-optical bumps size.
 */

@font-face {
    font-family: "Morfin Sans";
    src: url("../assets/fonts/morfin-sans.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Rostov";
    src: url("../assets/fonts/rostov.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Klukva";
    src: url("../assets/fonts/klukva.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Geologica";
    src: url("../assets/fonts/geologica.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Forest Smooth";
    src: url("../assets/fonts/forest-smooth.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Neucha";
    src: url("../assets/fonts/neucha.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Coolvetica";
    src: url("../assets/fonts/coolvetica.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-optical: 1;
    --font-brand-optical: 1;
    --tracking-ui: -0.01em;
    --tracking-brand: -0.02em;
    --tracking-eyebrow: 0.1em;
    --leading-tight: 1.05;
    --leading-snug: 1.3;
    --leading-body: 1.5;
    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-md: 1rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-display: 2.5rem;
}

/* Default — Geologica UI + Klukva brand */
html[data-font="geo-klukva"],
html:not([data-font]) {
    --font-ui: "Geologica", "Satoshi", system-ui, sans-serif;
    --font-brand: "Klukva", "Geologica", system-ui, sans-serif;
    --font-optical: 1.02;
    --font-brand-optical: 1.16;
    --tracking-ui: -0.01em;
    --tracking-brand: 0.012em;
}
html[data-font="satoshi"] {
    --font-ui: "Satoshi", system-ui, sans-serif;
    --font-brand: "Clash Display", "Satoshi", sans-serif;
    --font-optical: 1;
    --font-brand-optical: 1;
    --tracking-ui: -0.015em;
    --tracking-brand: -0.03em;
}
html[data-font="morfin"] {
    --font-ui: "Morfin Sans", system-ui, sans-serif;
    --font-brand: "Morfin Sans", system-ui, sans-serif;
}
html[data-font="rostov"] {
    --font-ui: "Rostov", system-ui, sans-serif;
    --font-brand: "Rostov", system-ui, sans-serif;
}
html[data-font="klukva"] {
    --font-ui: "Klukva", system-ui, sans-serif;
    --font-brand: "Klukva", system-ui, sans-serif;
    /* Klukva metrics read small — lift body + titles */
    --font-optical: 1.12;
    --font-brand-optical: 1.2;
    --tracking-ui: 0.01em;
    --tracking-brand: 0.015em;
    --leading-body: 1.42;
}
html[data-font="geologica"] {
    --font-ui: "Geologica", system-ui, sans-serif;
    --font-brand: "Geologica", system-ui, sans-serif;
    --font-optical: 1.02;
    --tracking-ui: -0.01em;
}
html[data-font="forest"] {
    --font-ui: "Forest Smooth", system-ui, sans-serif;
    --font-brand: "Forest Smooth", system-ui, sans-serif;
}
html[data-font="neucha"] {
    --font-ui: "Neucha", system-ui, sans-serif;
    --font-brand: "Neucha", system-ui, sans-serif;
    --font-optical: 1.08;
}
html[data-font="coolvetica"] {
    --font-ui: "Coolvetica", system-ui, sans-serif;
    --font-brand: "Coolvetica", system-ui, sans-serif;
}

html,
body {
    font-family: var(--font-ui) !important;
}
body {
    font-size: calc(1rem * var(--font-optical, 1));
    letter-spacing: var(--tracking-ui);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.brand-title,
.font-brand,
.dock-view-title,
.app-rail__brand {
    font-family: var(--font-brand) !important;
    letter-spacing: var(--tracking-brand);
    line-height: var(--leading-tight);
}
.brand-title,
.font-brand {
    font-size: calc(1em * var(--font-brand-optical, 1));
    font-weight: 400;
    text-wrap: balance;
}

/* Type roles — Geologica for UI, Klukva for display moments */
.type-eyebrow {
    font-family: var(--font-ui) !important;
    font-size: var(--text-caption, 0.6875rem);
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow, 0.1em);
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--ink-muted, #6b5340);
}
.type-title {
    font-family: var(--font-brand) !important;
    font-size: calc(var(--text-heading, 2rem) * var(--font-brand-optical, 1.16));
    font-weight: 400;
    letter-spacing: var(--tracking-brand);
    line-height: var(--leading-tight);
    color: var(--ink);
    text-wrap: balance;
}
.type-title--sm {
    font-size: calc(var(--text-heading-sm, 1.5rem) * var(--font-brand-optical, 1.16));
}
.type-title .ds-title-accent,
.type-title .type-accent {
    color: var(--accent, #FBAB57);
}
.type-subtitle {
    font-family: var(--font-ui) !important;
    font-size: var(--text-subheading, 1.25rem);
    font-weight: 600;
    letter-spacing: var(--tracking-ui);
    line-height: var(--leading-snug);
    color: var(--ink);
}
.type-body {
    font-family: var(--font-ui) !important;
    font-size: var(--text-body, 1rem);
    font-weight: 400;
    letter-spacing: var(--tracking-ui);
    line-height: var(--leading-body);
    color: var(--ink);
}
.type-meta {
    font-family: var(--font-ui) !important;
    font-size: var(--text-body-sm, 0.8125rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: var(--ink-muted, #6b5340);
}
.type-metric {
    font-family: var(--font-ui) !important;
    font-size: var(--text-heading-sm, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
}

/* Tool titles (player track, dense UI) stay on Geologica — not display Klukva */
#player-title {
    font-family: var(--font-ui) !important;
    letter-spacing: var(--tracking-ui, 0);
    line-height: var(--leading-tight, 1.25);
    font-weight: 700;
}

.modal-label,
.ui-tab,
.mobile-nav-btn__label,
.admin-subtab-btn,
.palette-card__name,
.font-card__name {
    font-family: var(--font-ui);
    letter-spacing: 0.01em;
}

.font-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
@media (min-width: 420px) {
    .font-picker {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.font-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius-md, 0.875rem);
    border: 1px solid var(--panel-border, rgba(34, 34, 34, 0.1));
    background: color-mix(in srgb, var(--panel-solid, #FFF3E2) 70%, transparent);
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 160ms var(--ease-out, ease), transform 160ms var(--ease-out, ease), background 160ms ease;
}
.font-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent, #FBAB57) 45%, transparent);
}
.font-card.is-active {
    border: 2px solid var(--ink, #222222);
    background: var(--surface-stone, #F5E6D4);
    box-shadow: none;
}
.font-card__sample {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}
.font-card__name {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.72;
}