/* ============================================================
   SERVIS PC — Design tokens
   Zdroj: SERVIS PC - DESIGN MANUAL.pdf + LOGODESIGN/ORIGINAL/SVG.svg
   Značkové farby: #1863C9 (modrá), #E6E6E6 (svetlá šedá)
   Značkové písma: Montserrat (nadpisy), Roboto Slab (akcent/číslice)
   ============================================================ */

:root {
  /* --- Značková modrá (500 = presná farba z loga) --------- */
  --blue-50:  #EEF4FD;
  --blue-100: #D7E5FA;
  --blue-200: #B0CBF4;
  --blue-300: #7FA9EC;
  --blue-400: #4886DE;
  --blue-500: #1863C9;   /* BRAND — 5.73:1 na bielej = WCAG AA */
  --blue-600: #1352A8;   /* hover */
  --blue-700: #0F4187;   /* pressed */
  --blue-800: #0B3166;
  --blue-900: #082246;
  --blue-950: #051529;

  /* --- Neutrály (200 = značková šedá #E6E6E6) ------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8FA;
  --neutral-100: #F0F1F4;
  --neutral-200: #E6E6E6;  /* BRAND šedá */
  --neutral-300: #D2D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;  /* 7.5:1 na bielej — sekundárny text */
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;

  /* --- Tmavé povrchy (hero, päta) ------------------------- */
  --dark-surface:   #0B0E14;
  --dark-elevated:  #141922;
  --dark-border:    #253044;

  /* --- Sémantické role: svetlá časť webu ------------------ */
  --color-primary:            var(--blue-500);
  --color-primary-hover:      var(--blue-600);
  --color-primary-active:     var(--blue-700);
  --color-on-primary:         var(--neutral-0);
  --color-primary-subtle:     var(--blue-50);
  --color-primary-subtle-fg:  var(--blue-800);

  --color-background:      var(--neutral-0);
  --color-surface:         var(--neutral-50);
  --color-card:            var(--neutral-0);
  --color-foreground:      var(--neutral-900);  /* 17.7:1 */
  --color-muted-fg:        var(--neutral-600);  /*  7.5:1 */
  --color-border:          var(--neutral-300);
  --color-border-strong:   var(--neutral-400);

  /* Stav / spätná väzba — nikdy nie farba samotná, vždy + ikona a text */
  --color-success:     #15803D;
  --color-warning:     #B45309;
  --color-danger:      #B91C1C;
  --color-on-status:   var(--neutral-0);

  --color-ring: var(--blue-500);   /* focus ring */

  /* --- Typografia ----------------------------------------- */
  --font-heading: "Montserrat", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-accent:  "Roboto Slab", ui-serif, Georgia, "Times New Roman", serif;
  /* Tabuľkové číslice pre telefóny, otváracie hodiny, IČO */
  --font-numeric: var(--font-accent);

  /* Typová škála — mobile-first, base 16px (bez iOS auto-zoomu) */
  --text-xs:   0.75rem;   /* 12 — len popisky, nikdy súvislý text */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 — telo textu */
  --text-lg:   1.125rem;  /* 18 — perex */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 — hero na desktope */

  --leading-tight: 1.15;  /* nadpisy */
  --leading-snug:  1.35;
  --leading-body:  1.6;   /* telo textu */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* --- Priestor: 4/8px rytmus (density 4/10 = standard) ---- */
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 — medzera medzi sekciami (mobil) */
  --space-24: 6rem;     /* 96 — medzera medzi sekciami (desktop) */

  /* --- Tvar a povrch --------------------------------------- */
  /* Rádius odvodený z loga: PC je v zaobleného "pill" tvare */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;   /* tlačidlá — echo tvaru loga */

  --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.06);
  --shadow-md: 0 4px 12px rgb(17 24 39 / 0.08);
  --shadow-lg: 0 12px 32px rgb(17 24 39 / 0.10);

  --container: 1200px;
  --measure:   68ch;      /* dĺžka riadku súvislého textu */

  /* --- Pohyb ----------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   150ms;   /* hover, farebné zmeny */
  --dur-base:   250ms;   /* rozbalenie, tooltip */
  --dur-slow:   400ms;   /* vstup sekcie, modal */

  /* --- Vrstvenie ------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Tmavý hero / päta — invertované role, nie invertované farby */
.on-dark {
  --color-background:    var(--dark-surface);
  --color-surface:       var(--dark-elevated);
  --color-card:          var(--dark-elevated);
  --color-foreground:    var(--neutral-0);
  --color-muted-fg:      #A9B4C6;   /* 8.3:1 na #0B0E14 */
  --color-border:        var(--dark-border);
  --color-border-strong: #3A4761;
  /* Značková modrá je na tmavom podklade príliš tmavá (3.37:1 — pod 4.5) —
     na tmavom používame svetlejší odtieň, aby text zostal čitateľný */
  --color-primary:       var(--blue-300);
  --color-primary-hover: var(--blue-200);
  --color-on-primary:    var(--blue-950);
  --color-ring:          var(--blue-300);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}