/* ===========================================================================
   Tipografija
   ---------------------------------------------------------------------------
   Tri role, tri porodice:
     • Source Serif 4 — naslovi. Radni serif iz pomoloških atlasa, ne ukrasni.
     • IBM Plex Sans  — tekst. Neutralan, ali sa inženjerskim karakterom koji
                        odgovara agronomskim podacima.
     • IBM Plex Mono  — etikete. Direktna referenca na pločicu koja stoji
                        zakačena za svaku sadnicu u rasadniku.
   =========================================================================== */

h1, h2, h3 {
    font-family: var(--dg-font-display);
    font-variation-settings: var(--dg-display-settings);
    font-weight: 600;
    line-height: var(--dg-lh-tight);
    letter-spacing: var(--dg-track-tight);
    text-wrap: balance;
}

/* Četvrti nivo je već u zoni interfejsa — serif tu počinje da smeta */
h4 {
    font-family: var(--dg-font-body);
    font-weight: 700;
    line-height: var(--dg-lh-snug);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h1 { font-size: var(--dg-fs-3xl); }
h2 { font-size: var(--dg-fs-2xl); }
h3 { font-size: var(--dg-fs-xl); }
h4 { font-size: var(--dg-fs-lg); line-height: var(--dg-lh-snug); }

h5, h6 {
    font-family: var(--dg-font-body);
    font-size: var(--dg-fs-base);
    font-weight: 600;
    line-height: var(--dg-lh-snug);
}

p { text-wrap: pretty; }

.lead {
    font-size: var(--dg-fs-md);
    line-height: var(--dg-lh-loose);
    color: var(--dg-ink-muted);
    max-width: var(--dg-measure);
}

a {
    color: var(--dg-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--dg-dur-fast) var(--dg-ease);
}
a:hover { color: var(--dg-primary-hover); }

/* --- Etiketa ------------------------------------------------------------- */
.label {
    font-family: var(--dg-font-body);
    font-size: var(--dg-fs-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--dg-ink-muted);
}

/* Nadnaslov iznad sekcije */
.eyebrow {
    font-family: var(--dg-font-body);
    font-size: var(--dg-fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-bark);
    display: block;
    margin-bottom: var(--dg-2);
}

/* Podaci u tabelama specifikacije */
.numeric {
    font-family: var(--dg-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.95em;
}

.price {
    font-family: var(--dg-font-body);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: var(--dg-fs-lg);
    letter-spacing: -0.02em;
}
.price--old {
    font-size: var(--dg-fs-sm);
    font-weight: 400;
    color: var(--dg-ink-muted);
    text-decoration: line-through;
}

/* Krupan naslov za hero — jedini put gde tipografija sme da bude glasna */
.display {
    font-family: var(--dg-font-display);
    font-variation-settings: var(--dg-display-settings);
    font-size: var(--dg-fs-4xl);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
    margin: 0;
}

/* --- Blok teksta iz editora ---------------------------------------------- */
.prose { max-width: var(--dg-measure); }
.prose > * + * { margin-top: var(--dg-4); }
.prose h2 { font-size: var(--dg-fs-xl); margin-top: var(--dg-7); }
.prose h3 { font-size: var(--dg-fs-lg); margin-top: var(--dg-6); }
.prose ul, .prose ol { padding-left: var(--dg-5); }
.prose li + li { margin-top: var(--dg-2); }
.prose img { border-radius: var(--dg-radius); margin-block: var(--dg-5); }
.prose blockquote {
    border-left: 3px solid var(--dg-accent);
    padding-left: var(--dg-4);
    font-family: var(--dg-font-display);
    font-size: var(--dg-fs-md);
}
.prose code {
    font-family: var(--dg-font-mono);
    font-size: 0.9em;
    background: var(--dg-surface-sunken);
    padding: 0.15em 0.35em;
    border-radius: var(--dg-radius-sm);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}