/* ============================================================
   mControl – design tokens (v1, 2026-09-05)
   Jediný zdroj farieb, typografie, rozostupov a pohybu.
   Použitie: <link rel="stylesheet" href="css/design-tokens.css">
   Prepnutie témy sekcie: <section class="is-dark"> / <section class="is-brand">
   ============================================================ */
:root {
  /* ---------- Brand: primary (limetková zelená z loga) ---------- */
  --c-primary-50:  #F6F9E8;
  --c-primary-100: #EBF2C9;
  --c-primary-200: #D9E69A;
  --c-primary-300: #C4D66A;
  --c-primary-400: #ACC450;  /* zelená z loga mcontrol.png */
  --c-primary-500: #9AB41D;  /* jadro značky (favicon, súčasný web) – NIE na text na svetlom */
  --c-primary-600: #7E9418;  /* len veľký text / ikony na svetlom (3.4:1) */
  --c-primary-700: #627313;  /* text na svetlom pozadí – AA 5.3:1 */
  --c-primary-800: #47540E;  /* malý text na svetlom – AA 8.3:1; pozadie brand sekcie */
  --c-primary-900: #2F3A0A;

  /* ---------- Accent: chladná „tech" modrá (striedmo: dáta, odkazy na tmavom, info) ---------- */
  --c-accent-300: #8FC4FA;
  --c-accent-400: #5BA8F5;  /* na tmavom – AA 7.0:1 */
  --c-accent-500: #2F86E6;
  --c-accent-600: #1F6BC2;  /* text na svetlom – AA 5.3:1 */
  --c-accent-700: #175396;

  /* ---------- Neutrály (jemný olivový nádych, ladia so zelenou) ---------- */
  --c-n-0:   #FFFFFF;
  --c-n-50:  #F8F9F5;  /* „papier" – základné svetlé pozadie */
  --c-n-100: #F0F2EA;  /* alternatívne svetlé pozadie */
  --c-n-200: #E2E5DA;  /* linky, rámy */
  --c-n-300: #C9CDBF;
  --c-n-400: #9DA294;
  --c-n-500: #737A6B;  /* len veľký/dekoratívny text (4.4:1) */
  --c-n-600: #565C4F;  /* sekundárny text – AA 6.9:1 */
  --c-n-700: #3E4338;
  --c-n-800: #2A2E26;
  --c-n-900: #1A1D17;  /* hlavný text */

  /* ---------- Tmavé plochy (z tmavého „o" v logu #34382C) ---------- */
  --c-dark-950: #0E110C;
  --c-dark-900: #151A12;  /* hero, MaR sekcia, pätička */
  --c-dark-800: #1C2318;  /* karty na tmavom */
  --c-dark-700: #262E21;
  --c-dark-600: #34382C;

  /* ---------- Sémantické ---------- */
  --c-success:        var(--c-primary-600);
  --c-warning:        #E0A322;
  --c-warning-text:   #8A6206;  /* AA 5.5:1 na bielej */
  --c-danger:         #D9482B;
  --c-danger-text:    #B8361D;  /* AA 5.9:1 na bielej */
  --c-danger-on-dark: #FF8A78;
  --c-info:           var(--c-accent-500);

  /* ---------- Rolové tokeny (svetlá téma = default) ---------- */
  --bg:          var(--c-n-50);
  --bg-elev:     var(--c-n-0);      /* karty, formulár */
  --bg-alt:      var(--c-n-100);    /* striedavé sekcie */
  --fg:          var(--c-n-900);
  --fg-muted:    var(--c-n-600);
  --fg-subtle:   var(--c-n-500);
  --line:        var(--c-n-200);
  --line-strong: var(--c-n-300);
  --brand:       var(--c-primary-500);   /* plochy, tlačidlá, akcenty */
  --brand-text:  var(--c-primary-700);   /* zvýraznené slová v nadpisoch, eyebrow */
  --brand-soft:  var(--c-primary-100);   /* jemné pozadie tagov/ikon */
  --on-brand:    var(--c-dark-900);      /* text na --brand tlačidle (7.5:1) */
  --focus:       var(--c-accent-500);

  /* ---------- Typografia ---------- */
  --ff-heading: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.55rem + 3.8vw, 4.5rem);   /* 40 → 72 px (hero H1) */
  --fs-h2:      clamp(1.875rem, 1.35rem + 2.1vw, 3rem);   /* 30 → 48 px */
  --fs-h3:      clamp(1.25rem, 1.12rem + .5vw, 1.5rem);   /* 20 → 24 px */
  --fs-h4:      1.125rem;                                  /* 18 px */
  --fs-lead:    clamp(1.0625rem, 1rem + .4vw, 1.25rem);   /* 17 → 20 px */
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-xs:      .75rem;
  --fs-stat:    clamp(2rem, 1.5rem + 1.8vw, 3rem);        /* čísla 200+, 24/7 */

  --lh-tight:   1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --lh-relaxed: 1.7;
  --ls-tight:   -.02em;   /* display/H2 */
  --ls-eyebrow: .12em;    /* eyebrow UPPERCASE */

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

  /* ---------- Rozostupy (4 px základ) ---------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;  --sp-32: 8rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);   /* vertikálny padding sekcií 72 → 128 px */
  --gutter:    clamp(1rem, 4vw, 2rem);            /* bočný okraj 16 → 32 px */
  --card-pad:  clamp(1.25rem, 1rem + 1.2vw, 2rem);

  /* ---------- Layout ---------- */
  --container:        75rem;   /* 1200 px */
  --container-wide:   82rem;   /* 1312 px – hero, bento */
  --container-narrow: 46rem;   /* 736 px – popisy sekcií */
  --nav-h:            4.5rem;  /* 72 px */

  /* ---------- Zaoblenia ---------- */
  --r-sm: .5rem; --r-md: .875rem; --r-lg: 1.25rem; --r-xl: 1.75rem; --r-pill: 999px;

  /* ---------- Tiene ---------- */
  --sh-sm:   0 1px 2px rgba(26,29,23,.06), 0 1px 3px rgba(26,29,23,.04);
  --sh-md:   0 4px 12px rgba(26,29,23,.06), 0 12px 32px rgba(26,29,23,.08);
  --sh-lg:   0 24px 64px rgba(26,29,23,.16);
  --sh-glow: 0 0 0 4px rgba(154,180,29,.25);

  /* ---------- Pohyb ---------- */
  --dur-1: 150ms;   /* hover */
  --dur-2: 300ms;   /* menu, prepínače */
  --dur-3: 700ms;   /* scroll reveal */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --reveal-y: 28px;
  --stagger: 80ms;

  /* ---------- Z-index ---------- */
  --z-nav: 100; --z-menu: 200; --z-skip: 300;
}

/* ---------- Tmavá plocha (hero, Priemysel & MaR, pätička) ---------- */
.is-dark {
  --bg:          var(--c-dark-900);
  --bg-elev:     var(--c-dark-800);
  --bg-alt:      var(--c-dark-700);
  --fg:          var(--c-n-0);
  --fg-muted:    var(--c-n-300);
  --fg-subtle:   var(--c-n-400);
  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --brand-text:  var(--c-primary-300);   /* AA 11:1 */
  --brand-soft:  rgba(172,196,80,.14);
  --focus:       var(--c-accent-400);
  color-scheme: dark;
}

/* ---------- Brand plocha (Prečo mControl) ---------- */
.is-brand {
  --bg:          var(--c-primary-800);   /* biela na ňom 8.3:1 */
  --bg-elev:     rgba(255,255,255,.08);
  --fg:          var(--c-n-0);
  --fg-muted:    rgba(255,255,255,.80);
  --line:        rgba(255,255,255,.14);
  --line-strong: rgba(255,255,255,.24);
  --brand-text:  var(--c-primary-200);
  --brand-soft:  rgba(255,255,255,.10);
  --focus:       var(--c-n-0);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --reveal-y: 0px; --stagger: 0ms; }
}

/* Breakpointy (referencia – custom properties sa v @media použiť nedajú):
   sm 30em / 480 px · md 48em / 768 px · lg 64em / 1024 px · xl 80em / 1280 px
   Testovať: 360, 768, 1024, 1440, 1920 px. */