/* ==========================================================================
   LightWeb — Design Tokens
   Verzia 1.0 · 2026-09-03
   Jediný zdroj pravdy pre farby, typografiu, priestor, rádiusy a pohyb.
   Import ako prvý súbor, pred akýmkoľvek komponentovým CSS.
   ========================================================================== */

:root {
  /* ---------- 1. PRIMITÍVA: FARBY ---------------------------------------
     Primitíva sa nikdy nepoužívajú priamo v komponentoch.
     V komponentoch používaj sémantické tokeny (sekcia 2).                 */

  /* Ink — základná tmavá škála (povrchy dark módu, text v light móde) */
  --lw-ink-950:  #06080B;
  --lw-ink-900:  #0B0F14;   /* značková čierna */
  --lw-ink-800:  #131922;
  --lw-ink-700:  #1C2431;
  --lw-ink-600:  #2A3546;
  --lw-ink-500:  #3D4A5C;

  /* Slate — neutrálna škála (text, okraje, výplne) */
  --lw-slate-400: #6B7789;
  --lw-slate-300: #98A2B3;
  --lw-slate-200: #C6CDD8;
  --lw-slate-100: #E4E8EE;
  --lw-slate-50:  #F1F3F6;

  /* Bone — teplá svetlá plocha značky */
  --lw-bone:      #F4F3EF;
  --lw-white:     #FFFFFF;

  /* Lumen — jediná akcentová farba značky ("svetlo") */
  --lw-lumen-300: #FFD980;
  --lw-lumen-400: #FFC745;
  --lw-lumen-500: #FFB915;  /* značkový akcent */
  --lw-lumen-600: #E09E00;  /* len výplň / grafika, nie text na svetlom */
  --lw-lumen-700: #B07A00;  /* text ≥ 24px na svetlom (AA large) */
  --lw-lumen-800: #7A5400;  /* akcentový text na svetlom (AA 6.1:1) */

  /* Systémové farby — nie sú súčasťou značky, iba stavová komunikácia */
  --lw-success-600: #15803D;  --lw-success-300: #4ADE80;
  --lw-warning-600: #B45309;  --lw-warning-300: #FBBF24;
  --lw-error-600:   #B42318;  --lw-error-300:   #F87171;
  --lw-info-600:    #1D4ED8;  --lw-info-300:    #7DA6FF;

  /* Dátová vizualizácia — kategórie v tomto poradí */
  --lw-viz-1: #FFB915;
  --lw-viz-2: #7DA6FF;
  --lw-viz-3: #4ADE80;
  --lw-viz-4: #C08BFF;
  --lw-viz-5: #F87171;
  --lw-viz-6: #98A2B3;

  /* ---------- 2. SÉMANTICKÉ TOKENY — LIGHT (default) -------------------- */
  --lw-bg:            var(--lw-bone);
  --lw-bg-elevated:   var(--lw-white);
  --lw-bg-sunken:     #EAE9E4;
  --lw-bg-inverse:    var(--lw-ink-900);

  --lw-text:          var(--lw-ink-900);
  --lw-text-muted:    #55606E;                /* 5.8:1 na bone */
  --lw-text-subtle:   var(--lw-slate-400);    /* len ≥ 18px / neinformačné */
  --lw-text-inverse:  var(--lw-bone);
  --lw-text-accent:   var(--lw-lumen-800);

  --lw-border:        #DDDCD6;
  --lw-border-strong: var(--lw-slate-200);

  --lw-accent:            var(--lw-lumen-500);
  --lw-accent-hover:      var(--lw-lumen-400);
  --lw-accent-pressed:    var(--lw-lumen-600);
  --lw-on-accent:         var(--lw-ink-900);  /* text na akcentovej ploche */
  --lw-accent-surface:    #FFF3D6;
  --lw-accent-border:     #F5D08A;

  --lw-focus-ring:    var(--lw-ink-900);
  --lw-overlay:       rgba(11, 15, 20, 0.55);

  --lw-success: var(--lw-success-600);
  --lw-warning: var(--lw-warning-600);
  --lw-error:   var(--lw-error-600);
  --lw-info:    var(--lw-info-600);

  --lw-shadow-sm: 0 1px 2px rgba(11,15,20,.06), 0 1px 3px rgba(11,15,20,.05);
  --lw-shadow-md: 0 2px 4px rgba(11,15,20,.05), 0 8px 20px rgba(11,15,20,.08);
  --lw-shadow-lg: 0 4px 8px rgba(11,15,20,.05), 0 20px 48px rgba(11,15,20,.12);

  /* ---------- 3. TYPOGRAFIA -------------------------------------------- */
  --lw-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --lw-font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --lw-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --lw-fs-display-xl: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem);   /* 40 → 56 */
  --lw-fs-display-l:  clamp(2rem, 1.4rem + 2.4vw, 2.75rem);    /* 32 → 44 */
  --lw-fs-h1:         clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);/* 28 → 36 */
  --lw-fs-h2:         clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --lw-fs-h3:         1.375rem;   /* 22 */
  --lw-fs-h4:         1.125rem;   /* 18 */
  --lw-fs-body-lg:    1.125rem;   /* 18 */
  --lw-fs-body:       1rem;       /* 16 */
  --lw-fs-body-sm:    0.875rem;   /* 14 */
  --lw-fs-caption:    0.75rem;    /* 12 */

  --lw-lh-tight: 1.1;
  --lw-lh-snug:  1.25;
  --lw-lh-base:  1.6;
  --lw-lh-loose: 1.75;

  --lw-ls-tighter: -0.03em;
  --lw-ls-tight:   -0.02em;
  --lw-ls-normal:   0;
  --lw-ls-wide:     0.02em;
  --lw-ls-overline: 0.08em;

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

  --lw-measure: 68ch;   /* max. dĺžka riadku pre súvislý text */

  /* ---------- 4. PRIESTOR (4px mriežka) -------------------------------- */
  --lw-space-0:  0;
  --lw-space-1:  0.25rem;  /*  4 */
  --lw-space-2:  0.5rem;   /*  8 */
  --lw-space-3:  0.75rem;  /* 12 */
  --lw-space-4:  1rem;     /* 16 */
  --lw-space-5:  1.25rem;  /* 20 */
  --lw-space-6:  1.5rem;   /* 24 */
  --lw-space-8:  2rem;     /* 32 */
  --lw-space-10: 2.5rem;   /* 40 */
  --lw-space-12: 3rem;     /* 48 */
  --lw-space-16: 4rem;     /* 64 */
  --lw-space-20: 5rem;     /* 80 */
  --lw-space-24: 6rem;     /* 96 */
  --lw-space-32: 8rem;     /* 128 */

  /* ---------- 5. LAYOUT ------------------------------------------------- */
  --lw-container:      1200px;
  --lw-container-text: 760px;
  --lw-gutter:         var(--lw-space-6);
  --lw-columns:        12;

  --lw-bp-sm: 640px;
  --lw-bp-md: 768px;
  --lw-bp-lg: 1024px;
  --lw-bp-xl: 1280px;

  /* ---------- 6. RÁDIUSY ------------------------------------------------ */
  --lw-radius-xs:  4px;
  --lw-radius-sm:  6px;
  --lw-radius-md:  10px;
  --lw-radius-lg:  14px;
  --lw-radius-xl:  20px;
  --lw-radius-2xl: 28px;
  --lw-radius-full: 999px;

  /* ---------- 7. OKRAJE A ZAOSTRENIE ------------------------------------ */
  --lw-border-width: 1px;
  --lw-ring-width:   2px;
  --lw-ring-offset:  2px;

  /* ---------- 8. POHYB --------------------------------------------------- */
  --lw-dur-instant: 80ms;
  --lw-dur-fast:    140ms;
  --lw-dur-base:    220ms;
  --lw-dur-slow:    340ms;
  --lw-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --lw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- 9. VRSTVENIE ---------------------------------------------- */
  --lw-z-base: 0;
  --lw-z-sticky: 100;
  --lw-z-header: 200;
  --lw-z-dropdown: 300;
  --lw-z-overlay: 400;
  --lw-z-modal: 500;
  --lw-z-toast: 600;
}

/* ==========================================================================
   DARK — primárny režim značky.
   Aktivuje sa cez [data-theme="dark"] alebo systémové nastavenie.
   ========================================================================== */
:root[data-theme="dark"] {
  --lw-bg:            var(--lw-ink-900);
  --lw-bg-elevated:   var(--lw-ink-800);
  --lw-bg-sunken:     var(--lw-ink-950);
  --lw-bg-inverse:    var(--lw-bone);

  --lw-text:          var(--lw-bone);
  --lw-text-muted:    var(--lw-slate-300);
  --lw-text-subtle:   var(--lw-slate-400);
  --lw-text-inverse:  var(--lw-ink-900);
  --lw-text-accent:   var(--lw-lumen-400);

  --lw-border:        rgba(244, 243, 239, 0.10);
  --lw-border-strong: rgba(244, 243, 239, 0.20);

  --lw-accent:            var(--lw-lumen-500);
  --lw-accent-hover:      var(--lw-lumen-400);
  --lw-accent-pressed:    var(--lw-lumen-600);
  --lw-on-accent:         var(--lw-ink-900);
  --lw-accent-surface:    rgba(255, 185, 21, 0.10);
  --lw-accent-border:     rgba(255, 185, 21, 0.28);

  --lw-focus-ring:    var(--lw-lumen-400);
  --lw-overlay:       rgba(6, 8, 11, 0.72);

  --lw-success: var(--lw-success-300);
  --lw-warning: var(--lw-warning-300);
  --lw-error:   var(--lw-error-300);
  --lw-info:    var(--lw-info-300);

  --lw-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --lw-shadow-md: 0 4px 16px rgba(0,0,0,.55);
  --lw-shadow-lg: 0 16px 48px rgba(0,0,0,.65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lw-bg:            var(--lw-ink-900);
    --lw-bg-elevated:   var(--lw-ink-800);
    --lw-bg-sunken:     var(--lw-ink-950);
    --lw-bg-inverse:    var(--lw-bone);
    --lw-text:          var(--lw-bone);
    --lw-text-muted:    var(--lw-slate-300);
    --lw-text-subtle:   var(--lw-slate-400);
    --lw-text-inverse:  var(--lw-ink-900);
    --lw-text-accent:   var(--lw-lumen-400);
    --lw-border:        rgba(244, 243, 239, 0.10);
    --lw-border-strong: rgba(244, 243, 239, 0.20);
    --lw-accent-surface: rgba(255, 185, 21, 0.10);
    --lw-accent-border:  rgba(255, 185, 21, 0.28);
    --lw-focus-ring:    var(--lw-lumen-400);
    --lw-overlay:       rgba(6, 8, 11, 0.72);
    --lw-success: var(--lw-success-300);
    --lw-warning: var(--lw-warning-300);
    --lw-error:   var(--lw-error-300);
    --lw-info:    var(--lw-info-300);
    --lw-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --lw-shadow-md: 0 4px 16px rgba(0,0,0,.55);
    --lw-shadow-lg: 0 16px 48px rgba(0,0,0,.65);
  }
}

/* ==========================================================================
   Minimálny základ — voliteľné, ale odporúčané.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lw-bg);
  color: var(--lw-text);
  font-family: var(--lw-font-text);
  font-size: var(--lw-fs-body);
  line-height: var(--lw-lh-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--lw-font-display);
  font-weight: var(--lw-fw-bold);
  letter-spacing: var(--lw-ls-tight);
  line-height: var(--lw-lh-snug);
  margin: 0;
}

code, pre, kbd { font-family: var(--lw-font-mono); }

:focus-visible {
  outline: var(--lw-ring-width) solid var(--lw-focus-ring);
  outline-offset: var(--lw-ring-offset);
  border-radius: var(--lw-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}