/* =========================================================================
   DESIGN TOKENY – jediný zdroj pravdy pre farby, písmo, medzery a rozmery.
   V ostatných CSS súboroch používaj VÝHRADNE tieto premenné.
   Vizuálna identita 2026: tmavý podklad, svetlý zelenomodrý akcent („signál“),
   Funnel Display na nadpisy a čísla, Host Grotesk na text (od 10/2026, pôvodne Chakra Petch + Inter).
   ========================================================================= */
/* Písma sú na vlastnom serveri (src/fonts/, licencia SIL Open Font License 1.1), nie z Google Fonts:
   prehliadač tak neposiela IP adresu návštevníka tretej strane bez súhlasu (GDPR). */
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/funnel-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/funnel-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/host-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/host-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Host Grotesk";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/host-grotesk-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Host Grotesk";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/host-grotesk-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* --- Farby: značka --- */
  --color-primary: #7cd2ae;        /* svetlá zelenomodrá: tlačidlá, akcent v nadpise, signál */
  --color-primary-hover: #9cdec2;
  --color-on-primary: #0c0d10;     /* text na zelenomodrej */
  --color-accent: #7cd2ae;         /* fokus */
  --color-on-primary-border: rgb(12 13 16 / 0.35); /* rámik na zelenomodrej */
  --color-primary-on-light: #298463; /* zelenomodrý text na bielom/svetlom podklade */
  /* Doplnková fialová (asi 10 % farby na stránke): tenké linky, veľké čísla, úvodzovky, druhé kľúčové slovo, trasa šípky.
     Len na tmavom podklade, nikdy na zelenomodrej ploche, nikdy ako bežný text ani štítok.
     Predtým červená #c8302a, od 4. 11. 2026 fialová #7c7cf5 (kontrast 5,6 : 1 voči pozadiu). */
  --color-accent-2: #7c7cf5;
  --color-accent-2-line: rgb(124 124 245 / 0.8);
  /* Tlač: akcent #8ac9ad (len pre tlačové materiály, na webe sa nepoužíva) */

  /* --- Farby: neutrálne (tmavý podklad) --- */
  --color-text: #ecebe6;
  --color-on-dark: #ecebe6;       /* svetlý text na tmavom prvku, aj vnútri zelenomodrej plochy (tmavé tlačidlo) */
  --color-text-soft: #d6d5d0;      /* text v kartách */
  --color-text-muted: #a3a49f;     /* vedľajší text */
  --color-text-dim: #818389;       /* štítky, popisky čísel; v návrhu #74767c, zosvetlené kvôli kontrastu AA */
  --color-bg: #0c0d10;
  --color-bg-alt: #121318;
  --color-border: #2a2d35;
  --color-border-strong: #4a4d55;  /* sekundárne tlačidlo, čiarkovaný rámik */

  /* --- Farby: stavy --- */
  --color-success: #3ccf8e;
  --color-error: #ff6b5e;

  /* --- Typografia --- */
  --font-sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Funnel Display", var(--font-sans);
  --fs-xs: 0.8125rem;   /* 13px štítky */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.0625rem; /* 17px, od 960 px 18px (base.css) */
  --fs-lg: 1.1875rem;   /* 19px úvodný text sekcie */
  --fs-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); /* h3: 24 → 34px */
  --fs-2xl: clamp(2rem, 1.2rem + 3.2vw, 4rem);         /* h2: 32 → 64px */
  --fs-3xl: clamp(2.5rem, 1.2rem + 5.8vw, 6.75rem);    /* h1: 40 → 108px */
  --fs-card-title: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); /* nadpis karty 20 → 26px */
  --fs-quote: 1.3125rem;                              /* 21px citát */
  --fs-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); /* úvod hero 20 → 26px */
  --fs-band: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);    /* signálny pás 22 → 32px */
  --fs-stat: clamp(2.25rem, 1.8rem + 1.6vw, 3.5rem);   /* veľké čísla 36 → 56px */
  --lh-tight: 1.05;
  --lh-snug: 1.3;
  --lh-base: 1.6;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-label: 0;
  --tracking-display: -0.02em; /* nadpisy a veľké čísla */

  /* --- Medzery (škála) --- */
  --space-1: 0.25rem; /*   4px */
  --space-2: 0.5rem;  /*   8px */
  --space-3: 0.75rem; /*  12px */
  --space-4: 1rem;    /*  16px */
  --space-5: 1.5rem;  /*  24px */
  --space-6: 2rem;    /*  32px */
  --space-7: 3rem;    /*  48px */
  --space-8: 4rem;    /*  64px */
  --space-9: 6rem;    /*  96px */
  --space-10: 7.5rem; /* 120px */

  /* --- Layout --- */
  --container-max: 1240px;
  --container-pad: clamp(1rem, 4vw, 4rem); /* obsah nelepí na okraj, na desktope väčší okraj */
  --section-gap: var(--space-8); /* 64 px, od 640 px 96 px, od 960 px 120 px (layout.css) */
  --tap-min: 44px;

  /* --- Tvary a efekty (identita je hranatá) --- */
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --border-accent: 3px;
  --shadow-sm: none;
  --shadow: none;
  --transition: 150ms ease;
}

/* Breakpointy (v media queries nejdú premenné – používaj iba tieto hodnoty):
   sm: 640px   md: 960px   lg: 1200px    – vždy mobile-first (min-width) */

/* Zelenomodré plochy (pás, karta, výzva): text je vždy tmavý, vedľajší text tmavosivý.
   Farby textu a liniek sa tu prepnú, takže všetky komponenty vnútri sú čitateľné bez ďalších výnimiek. */
.section--accent,
.card--filled,
.cta,
.v2-event,
.v2-nudge__inner {
  --color-text: var(--color-on-primary);
  --color-text-soft: rgb(12 13 16 / 0.85);
  --color-text-muted: rgb(12 13 16 / 0.74);
  --color-text-dim: rgb(12 13 16 / 0.68);
  --color-border: rgb(12 13 16 / 0.22);
  --color-border-strong: rgb(12 13 16 / 0.45);
  color: var(--color-on-primary);
}