/* ==========================================================================
   Design tokens – Safybe
   Jediný zdroj farieb, typografie, rozostupov a tieňov. Komponenty používajú
   výhradne tieto premenné, nie priame hex hodnoty.
   ========================================================================== */

:root {
    /* Farby – tmavé plochy */
    --color-ink: #0b0b16;
    --color-bg-hero: #06051a;
    --color-bg-dark: #07061a;
    --color-bg-footer: #05040f;
    --color-bg-card-dark: #0b0a1e;
    --color-bg-field: #0c0a26;
    --color-bg-listbox: #100e2c;
    --color-bg-code: #0c0b22;
    --color-bg-code-bar: #100f2a;
    --color-bg-code-foot: #09081b;

    /* Farby – svetlé plochy */
    --color-bg-light: #ffffff;
    --color-bg-light-2: #f3f2f9;
    --color-bg-light-3: #eceef6;
    --color-bg-light-4: #f3f3f8;
    --color-surface: #f5f5fa;
    --color-surface-alt: #f1f0f8;
    --color-highlight: #f2efff;
    --color-highlight-strong: #e9e3ff;
    --color-highlight-active: #ece8ff;
    --color-highlight-hover: #f4f1ff;

    /* Značka */
    --color-blue: #2f5cff;
    --color-blue-alt: #3d6bff;
    --color-violet: #7c4dff;
    --color-violet-strong: #6b4dff;
    --color-violet-soft: #8f7bff;
    --color-pink: #ff4fc0;
    --color-pink-alt: #e05bd8;
    --color-link: #4b32e0;
    --color-link-hover: #2a1a9e;

    /* Text */
    --color-text: var(--color-ink);
    --color-text-muted: #4a4b63;
    --color-text-muted-2: #5a5b73;
    --color-text-muted-3: #6a6b85;
    --color-text-on-dark: #ffffff;
    --color-text-on-dark-muted: #c9c6e8;
    --color-text-on-dark-muted-2: #a9a6cf;
    --color-text-on-dark-muted-3: #8c89b5;
    --color-text-on-dark-nav: #cfcdea;
    --color-accent-soft: #c9bdff;
    --color-accent-soft-2: #b3a4ff;
    --color-placeholder: #a19ec8;

    /* Stavy */
    --color-success: #3ee0a2;
    --color-success-soft: #7af0c3;
    --color-success-on-light: #1fb57f;
    --color-success-strong: #0f7a55;
    --color-error: #ff7a9c;
    --color-error-on-light: #e0466e;
    --color-error-strong: #a3163f;
    --color-error-bg: #fdebf0;
    --color-success-bg: #e3f8ef;
    --color-warning: #e39a14;
    --color-warning-strong: #7a4d06;
    --color-warning-bg: #fdf3df;

    /* Formulárové polia na svetlom */
    --color-border-field: #dcd9ec;
    --color-border-field-hover: #c4bfe0;
    --color-meter-track: #e8e5f4;

    /* Priehľadné vrstvy na tmavom */
    --color-glass-1: rgba(255, 255, 255, 0.05);
    --color-glass-2: rgba(255, 255, 255, 0.08);
    --color-glass-3: rgba(255, 255, 255, 0.09);
    --color-glass-4: rgba(255, 255, 255, 0.12);
    --color-glass-5: rgba(255, 255, 255, 0.18);

    /* Prechody */
    --gradient-brand: linear-gradient(100deg, #2f5cff 0%, #7c4dff 50%, #ff4fc0 100%);
    --gradient-brand-text: linear-gradient(100deg, #2f5cff, #7c4dff 50%, #e0469f);
    --gradient-step-1: linear-gradient(135deg, #2f5cff, #5a5cff);
    --gradient-step-2: linear-gradient(135deg, #5a5cff, #7c4dff);
    --gradient-step-3: linear-gradient(135deg, #7c4dff, #a24ff0);
    --gradient-step-4: linear-gradient(135deg, #a24ff0, #e05bd8);
    --gradient-avatar-a: linear-gradient(135deg, #2f5cff, #7c4dff);
    --gradient-avatar-b: linear-gradient(135deg, #9a5cff, #ff4fc0);
    --gradient-dot: linear-gradient(90deg, #2f5cff, #ff4fc0);

    /* Typografia */
    --font-sans: 'Geist', 'Geist Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --fs-h1-hero: clamp(41px, 6.5vw, 94px);
    --fs-h1-detail: clamp(32px, 4.4vw, 64px);
    --fs-h2: clamp(34px, 4vw, 56px);
    --fs-h2-detail: clamp(30px, 3vw, 42px);
    --fs-h2-dev: clamp(38px, 5vw, 72px);
    --fs-lead: 17.5px;
    --fs-body: 16px;
    --fs-small: 14.5px;
    --fs-caption: 13.5px;

    --tracking-tight: -0.045em;
    --tracking-h2: -0.04em;

    /* Rádiusy */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Tiene */
    --shadow-card: 0 1px 2px rgba(20, 16, 60, 0.06), 0 30px 80px -30px rgba(40, 24, 120, 0.32);
    --shadow-code: 0 50px 100px -40px rgba(40, 24, 120, 0.55);
    --shadow-badge: 0 10px 24px -12px rgba(107, 77, 255, 0.9);
    --shadow-search-focus: 0 0 0 6px rgba(120, 92, 255, 0.18), 0 30px 90px -20px rgba(140, 70, 255, 0.75);
    --shadow-search-rest: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
    --shadow-search-pulse: 0 0 0 6px rgba(143, 123, 255, 0.45), 0 0 80px 10px rgba(143, 123, 255, 0.5);

    /* Rozloženie */
    --container: 1264px;
    --container-wide: 1360px;
    --gutter: clamp(20px, 4vw, 48px);
    --section-y: clamp(80px, 10vw, 136px);
    --section-y-detail: clamp(56px, 7vw, 104px);
    --section-y-compact: clamp(44px, 5vw, 72px);
    --header-h: 88px;          /* výška navigácie homepage (padding 22 + 44) */
    --header-h-detail: 84px;   /* výška navigácie detailu (padding 20 + 44) */

    /* Pohyb */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 0.2s;
    --duration-base: 0.3s;
}