/* base.css — reset + tipografija + osnovne primitive.
 * Stabilizovana verzija; SkyWork-mapped klase dolaze posle ekstrakcije.
 */

*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    /* Fixed header offset za anchor jumps (skip-link, #fragment URL-ovi) */
    scroll-padding-top: var(--header-height);
}
@media (max-width: 1023px) {
    html { scroll-padding-top: var(--header-height-mobile); }
}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }

html, body { background: var(--bg-light); color: var(--fg-light); }

/* Skrolbar: providna traka (bez belog „žleba" na tamnim sekcijama) — vidi se
   samo palac, isto na svetlim i tamnim blokovima. Neutralan poluprozirni
   palac radi na obe pozadine. */
html { color-scheme: light; scrollbar-width: thin; scrollbar-color: rgba(120, 120, 120, 0.5) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120, 120, 120, 0.5); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 120, 0.72); }

body {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
/* :focus-visible (ne :focus) — inače link kliknut mišem zadrži „focus" boju
   posle back-navigacije (npr. „Pišite nam" dugme ostane crveno na tamnom).
   Tastatura i dalje dobija boju + outline (linija ispod). */
a:hover, a:focus-visible { color: var(--brand-hover); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Skip link — visible only on focus, ne pokriva header (z-index iznad) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: fixed;
    left: var(--space-4);
    top: var(--space-4);
    width: auto;
    height: auto;
    padding: var(--space-3) var(--space-4);
    background: var(--fg-light);
    color: #fff;
    text-decoration: none;
    z-index: 110;
    font-family: var(--font-sans);
    font-weight: 600;
    border-radius: var(--radius-md);
}

/* Headings */
.display-heading {
    font-size: clamp(3rem, 6.5vw, 5.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
}
.section-heading {
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.card-heading {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* Mono labels */
.mono-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-light-muted);
}
.mono-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Zones */
.zone-light { background: var(--bg-light); color: var(--fg-light); }
.zone-dark  { background: var(--bg-dark);  color: var(--fg-dark);  }

/* Inline SVG <defs> wrapper — out of flow, ne renderuje vidljiv content.
   Zamena za inline style="position:absolute" koji blokira CSP style-src-attr. */
.cp-svg-defs { position: absolute; }

/* Container */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-5);
}
.container.narrow { max-width: var(--container-narrow); }

/* Buttons — minimalna verzija */
.btn-primary, .btn-outline, .btn-ghost {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-2);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #fff;
}
.btn-outline {
    background: transparent;
    color: var(--brand);
    border-color: var(--brand);
}
.btn-outline:hover, .btn-outline:focus {
    background: var(--brand-faint);
    color: var(--brand-hover);
}
.btn-ghost {
    background: transparent;
    color: var(--fg-light);
    border-color: var(--bg-light-rule);
}
.btn-ghost:hover, .btn-ghost:focus {
    border-color: var(--fg-light);
    background: var(--bg-light-card);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}