/**
 * Dizajn tokeny Tabky.
 *
 * Hodnoty sú prevzaté z design_handoff_tabky_platform/README.md a overené proti
 * literálom v source/*.dc.html. Handoff je označený ako high-fidelity — farby,
 * typografia, spacing a rádiusy sú finálne. Needituj ich od oka.
 *
 * Prototypy používajú hex hodnoty priamo v štýloch. Tu z nich robíme premenné,
 * aby sa česká mutácia aj budúce úpravy dali robiť na jednom mieste.
 */

:root {
    /* --- Značka --- */
    --tk-navy: #0a1a35;           /* tmavé hero, footer, sidebar portálu */
    --tk-indigo: #4F46E5;         /* primárna akcia */
    --tk-indigo-hover: #4338CA;
    --tk-indigo-tint: #EEF2FF;
    --tk-indigo-border: #C7D2FE;

    /* --- Stav --- */
    /* Zelená patrí ľudským kliknutiam. Rozlíšenie bot/človek je jadro
       hodnoty produktu, preto má vlastnú farbu naprieč celým portálom. */
    --tk-green: #059669;
    --tk-green-light: #10B981;
    --tk-green-soft: #6ee7b7;
    --tk-green-bg: #ECFDF5;

    --tk-orange: #EA580C;
    --tk-orange-bg: #FFF7ED;

    --tk-pink: #DB2777;
    --tk-pink-bg: #FDF2F8;

    --tk-danger: #DC2626;
    --tk-danger-light: #F87171;

    /* --- Text --- */
    --tk-text: #0F172A;           /* nadpisy */
    --tk-text-body: #334155;
    --tk-text-muted: #475569;
    --tk-text-soft: #64748B;
    --tk-text-faint: #94A3B8;     /* popisky, eyebrow */

    /* --- Plochy a čiary --- */
    --tk-bg: #ffffff;
    --tk-bg-alt: #F8FAFC;         /* pozadie sekcií */
    --tk-bg-tint: #f1f3f8;
    --tk-border: #EEF0F3;
    --tk-border-strong: #E2E8F0;
    --tk-border-cool: #dde4f0;
    --tk-border-muted: #cbd5e1;
    --tk-divider: #e7eaf2;

    /* --- Typografia --- */
    --tk-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --tk-fs-hero: 54px;           /* na mobile 32px, viď base.css */
    --tk-fs-h1: 36px;
    --tk-fs-h2: 28px;
    --tk-fs-h3: 20px;
    --tk-fs-body: 15px;
    --tk-fs-small: 13px;
    --tk-fs-label: 11px;

    --tk-fw-body: 400;
    --tk-fw-medium: 500;
    --tk-fw-semi: 600;
    --tk-fw-bold: 700;
    --tk-fw-heavy: 800;           /* eyebrow, labely */
    --tk-fw-black: 900;           /* nadpisy */

    --tk-ls-label: .12em;         /* rozsah v handoffe .06–.14em */

    /* --- Rádiusy --- */
    --tk-r-input: 12px;
    --tk-r-button: 14px;
    --tk-r-card-sm: 18px;
    --tk-r-card: 22px;
    --tk-r-panel: 28px;
    --tk-r-pill: 999px;

    /* --- Tiene --- */
    --tk-shadow-cta: 0 12px 26px rgba(79, 70, 229, .3);
    --tk-shadow-lift: 0 18px 36px rgba(15, 23, 42, .08);

    /* --- Rozmery --- */
    --tk-max: 1280px;             /* eshop, footer */
    --tk-max-narrow: 1200px;      /* košík, checkout */
    --tk-sidebar: 272px;          /* sidebar portálu */

    --tk-section-y: 80px;         /* marketingové sekcie */
    --tk-page-y: 40px;            /* aplikačné stránky, rozsah 36–44px */
    --tk-gap: 22px;               /* rozsah 18–24px */
}

/*
 * Breakpointy z handoffu — v CSS ich nevieme použiť ako premenné v @media,
 * ale zapisujeme ich sem, aby bol zoznam na jednom mieste:
 *
 *   1100px  sidebar portálu -> horná lišta s hamburgerom; 2-stĺpce -> 1
 *    980px  hero / produkt / checkout -> 1 stĺpec
 *    860px  hlavička eshopu -> hamburger
 *    760px  footer 4 -> 2 stĺpce
 *    640px  košík a dlaždice -> 1 stĺpec
 *    560px  skryje sa text CTA tlačidla v hlavičke
 *    480px  footer -> 1 stĺpec, hero typografia najmenšia
 */

/*
 * Astra má vlastnú paletu z prispôsobovača (modrá #046bd2 / #045cb4) a používa
 * ju na všetky `.button`, odkazy a hlásenia, ktoré si sami neprepíšeme –
 * napr. „Zobraziť košík" v hlásení po pridaní do košíka. Prepísanie premenných
 * ju nahradí indigom všade naraz. `html:root` má vyššiu špecificitu než
 * Astrin `:root`, takže nezáleží na poradí štýlov.
 */
html:root {
    --ast-global-color-0: var(--tk-indigo);
    --ast-global-color-1: var(--tk-indigo-hover);
}