/* ==========================================================================
   WebPark Systems – dizajnové tokeny
   Farby OKLCH, téma cez color-scheme + light-dark(), fluid typografia,
   @property pre animovateľné vlastné vlastnosti.
   ========================================================================== */

@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk-var.woff2") format("woff2-variations"),
         url("../fonts/space-grotesk-var.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* Animovateľné vlastnosti (gradienty, glow, tilt) */
@property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@property --glow-x {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}

@property --glow-y {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 50%;
}

@property --tilt-x {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@property --tilt-y {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@property --gradient-shift {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --counter-value {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
}

:root {
    color-scheme: light dark;

    /* --- Značka --- */
    --brand-violet: oklch(0.6 0.22 285);
    --brand-indigo: oklch(0.55 0.2 270);
    --brand-cyan: oklch(0.76 0.14 215);
    --brand-mint: oklch(0.8 0.15 170);
    --brand-gradient: linear-gradient(120deg, var(--brand-violet), var(--brand-cyan));
    --brand-gradient-wide: linear-gradient(120deg, var(--brand-violet) 0%, var(--brand-indigo) 35%, var(--brand-cyan) 70%, var(--brand-mint) 100%);

    /* Plochy s bielym textom: tmavšie konce gradientu (WCAG AA ≥ 4.5 : 1 na celej ploche) */
    --brand-gradient-strong: linear-gradient(120deg, oklch(0.5 0.22 285), oklch(0.5 0.13 235));
    /* Gradientový text: v svetlej téme tmavší, v tmavej svetlejší */
    --gradient-text-start: light-dark(oklch(0.48 0.22 285), oklch(0.74 0.16 285));
    --gradient-text-middle: light-dark(oklch(0.46 0.18 265), oklch(0.78 0.13 240));
    --gradient-text-end: light-dark(oklch(0.48 0.12 230), oklch(0.84 0.12 195));
    --text-gradient: linear-gradient(120deg, var(--gradient-text-start), var(--gradient-text-middle), var(--gradient-text-end), var(--gradient-text-start));

    /* --- Plochy a text (svetlá | tmavá) --- */
    --color-bg: light-dark(oklch(0.975 0.006 275), oklch(0.15 0.03 272));
    --color-bg-elevated: light-dark(oklch(0.99 0.003 275), oklch(0.19 0.032 272));
    --color-surface: light-dark(oklch(1 0 0 / 0.72), oklch(0.23 0.035 272 / 0.62));
    --color-surface-strong: light-dark(oklch(1 0 0 / 0.92), oklch(0.24 0.035 272 / 0.92));
    --color-surface-sunken: light-dark(oklch(0.95 0.01 275), oklch(0.12 0.025 272));
    --color-text: light-dark(oklch(0.22 0.03 272), oklch(0.95 0.01 272));
    --color-text-muted: light-dark(oklch(0.47 0.03 272), oklch(0.76 0.02 272));
    --color-text-subtle: light-dark(oklch(0.49 0.025 272), oklch(0.66 0.02 272));
    --color-border: light-dark(oklch(0.88 0.012 275), oklch(1 0 0 / 0.1));
    --color-border-strong: light-dark(oklch(0.8 0.02 275), oklch(1 0 0 / 0.18));
    --color-accent: light-dark(oklch(0.52 0.22 285), oklch(0.78 0.13 260));
    --color-accent-contrast: oklch(0.99 0 0);
    --color-accent-soft: light-dark(oklch(0.6 0.22 285 / 0.1), oklch(0.7 0.18 280 / 0.16));
    --color-focus: light-dark(oklch(0.55 0.24 285), oklch(0.82 0.14 215));

    --color-success: light-dark(oklch(0.45 0.13 155), oklch(0.78 0.15 155));
    --color-success-soft: light-dark(oklch(0.6 0.15 155 / 0.12), oklch(0.7 0.15 155 / 0.16));
    --color-danger: light-dark(oklch(0.5 0.2 27), oklch(0.75 0.16 25));
    --color-danger-soft: light-dark(oklch(0.6 0.2 27 / 0.1), oklch(0.7 0.18 25 / 0.16));
    --color-warning-soft: light-dark(oklch(0.85 0.12 85 / 0.35), oklch(0.75 0.13 85 / 0.14));

    --glass-blur: 18px;
    --glass-saturate: 160%;

    /* --- Typografia --- */
    --font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;

    --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
    --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
    --step-3: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
    --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
    --step-5: clamp(2.5rem, 1.7rem + 3.6vw, 4.6rem);

    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.65;

    /* --- Priestor, tvary, tiene --- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
    --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);

    --container-max: 76rem;
    --container-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

    --radius-s: 0.5rem;
    --radius-m: 0.875rem;
    --radius-l: 1.375rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    --shadow-color: light-dark(oklch(0.35 0.08 280 / 0.12), oklch(0 0 0 / 0.45));
    --shadow-s: 0 1px 2px var(--shadow-color), 0 2px 8px var(--shadow-color);
    --shadow-m: 0 2px 6px var(--shadow-color), 0 12px 32px var(--shadow-color);
    --shadow-l: 0 8px 20px var(--shadow-color), 0 30px 80px var(--shadow-color);
    --shadow-glow: 0 0 0 1px oklch(0.7 0.2 285 / 0.25), 0 12px 48px oklch(0.6 0.22 285 / 0.3);

    /* --- Pohyb --- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.5%, 1);
    --duration-fast: 160ms;
    --duration-base: 280ms;
    --duration-slow: 600ms;

    --header-height: 4.5rem;
    --z-header: 50;
    --z-modal: 100;
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}