/* ============================================
   V4 — BASE STYLES
   Fonts, Variables, Reset
============================================ */

/* Sora Font - Local (full character set including Š, Ž, Č, Đ, ć) */
@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('../fonts/Sora-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Pause all CSS animations when page is in background */
.animations-paused,
.animations-paused * {
    animation-play-state: paused !important;
}

/* Keep header animations running */
.animations-paused .site-header,
.animations-paused .site-header * {
    animation-play-state: running !important;
}

/* Keep intro animations running only until initial animations complete */
.animations-paused .intro:not(.intro-complete),
.animations-paused .intro:not(.intro-complete) * {
    animation-play-state: running !important;
}

:root {
    /* Brand */
    --accent: #23479f;
    --accent-hover: #1a3577;

    /* Light */
    --bg: #f5f5f5;
    --bg-alt: #ffffff;
    --bg-dark: #0a0a0a;
    --text: #0a0a0a;
    --text-soft: #4a4a4a;
    --text-muted: #8a8a8a;
    --border: #e0e0e0;

    /* Font */
    --font: 'Sora', -apple-system, sans-serif;

    /* Spacing */
    --section-pad: 140px;
}

[data-theme="dark"] {
    --bg: #0a0a0a;
    --bg-alt: #111111;
    --bg-dark: #000000;
    --text: #f5f5f5;
    --text-soft: #b0b0b0;
    --text-muted: #666666;
    --border: #222222;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0a0a0a;
        --bg-alt: #111111;
        --bg-dark: #000000;
        --text: #f5f5f5;
        --text-soft: #b0b0b0;
        --text-muted: #666666;
        --border: #222222;
    }
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.8s ease, color 0.8s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Brand visibility */
.brand-light, .logo-light { display: block; }
.brand-dark, .logo-dark { display: none; }
[data-theme="dark"] .brand-light, [data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .brand-dark, [data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-light,
    :root:not([data-theme="light"]) .logo-light { display: none; }
    :root:not([data-theme="light"]) .brand-dark,
    :root:not([data-theme="light"]) .logo-dark { display: block; }
}