/* Dizajnové tokeny — 1:1 podľa design handoffu.
   Zmena hodnoty tu sa prepíše do celej stránky. */

:root {
  /* --- Plochy --- */
  --c-bg:            #08090A;  /* základné pozadie */
  --c-bg-alt:        #0B0C0E;  /* alternatívna sekcia */
  --c-card:          #0C0D0F;
  --c-card-hover:    #111214;
  --c-row-hover:     #131417;
  --c-row-selected:  #141518;

  /* --- Akcent --- */
  --c-accent:        #FF5A1F;
  --c-accent-hover:  #FF7A45;
  --c-accent-tint:   rgba(255, 90, 31, .07);
  --c-accent-tint-2: rgba(255, 90, 31, .05);
  --c-accent-br:     rgba(255, 90, 31, .45);
  --c-accent-br-2:   rgba(255, 90, 31, .55);

  /* --- Text --- */
  --c-text:          #F2F0EE;  /* primárny */
  --c-text-strong:   #E6E3DF;
  --c-text-body:     #C9C6C2;
  --c-text-2:        #B8B5B1;
  --c-text-muted:    #A8A5A1;
  --c-text-3:        #8C8A87;
  --c-label:         #7C7A77;
  --c-faint:         #6E6C69;
  --c-faintest:      #5E5C59;
  --c-pill:          #D6D3CF;  /* text v pilulkách použitia */
  --c-cons:          #9A9794;  /* „nevhodné pre“ */

  /* --- Hairlines --- */
  --hair-05: rgba(255, 255, 255, .05);
  --hair-06: rgba(255, 255, 255, .06);
  --hair-07: rgba(255, 255, 255, .07);
  --hair-08: rgba(255, 255, 255, .08);
  --hair-09: rgba(255, 255, 255, .09);
  --hair-12: rgba(255, 255, 255, .12);
  --hair-14: rgba(255, 255, 255, .14);
  --hair-22: rgba(255, 255, 255, .22);

  /* --- Typografia --- */
  --f-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-h1:       clamp(48px, 6.4vw, 104px);
  --fs-h2:       clamp(34px, 4vw, 60px);
  --fs-h2-about: clamp(28px, 2.6vw, 40px);
  --fs-band:     clamp(26px, 3.2vw, 46px);

  /* --- Layout --- */
  --content-max: 1240px;
  --page-inset:  48px;
  /* Skutočná výška hlavičky. Handoff hovoril o ~68 px, ale výšku riadku určuje
     CTA a v našej stavbe je hlavička 96,5 px — kotvy sekcií sa preto pri 68 px
     zarážali 12,5 px pod lištu. Presnú hodnotu dopĺňa motion.js, tieto sú
     odmerané predvolby pre prípad, že JS nebeží. */
  --header-h:    97px;
  /* Odstup zhora kvôli WordPress admin baru. Nula pre návštevníkov;
     pre prihlásených ju prepíše header.css a spresní motion.js. */
  --admin-bar-h: 0px;

  /* --- Radiusy --- */
  --r-logo:  2px;
  --r-input: 10px;
  --r-drop:  12px;
  --r-proc:  14px;
  --r-card:  16px;
  --r-form:  20px;
  --r-pill:  999px;

  /* --- Tiene --- */
  --sh-cta: 0 0 0 1px rgba(255, 90, 31, .4), 0 10px 30px -12px rgba(255, 90, 31, .7);

  /* --- Pohyb --- */
  --motion-strength: 1;         /* globálny multiplikátor parallaxu */
  --ease-reveal: cubic-bezier(.2, .7, .2, 1);
}

/* Prístupnosť: kto si vypne animácie, dostane stránku bez pohybu.
   Parallax sa vypína aj v JS (strength = 0), toto je CSS vrstva. */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-strength: 0; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 900px) {
  :root { --header-h: 85px; }
}

@media (max-width: 400px) {
  :root { --header-h: 74px; }
}

::selection { background: var(--c-accent); color: var(--c-bg); }