/* ============================================================
   Wycena Web — Design Tokens
   Bazuje na Unfold 3D / GitHub Primer Dark, zmodernizowane pod
   responsywny web. Single source of truth.
   ============================================================ */

:root {
  /* ---------- Color · Surfaces ---------- */
  --c-bg:           #0a0d12;       /* canvas (głębsze niż Qt #0d1117 — lepsze OLED) */
  --c-surface-0:    #0d1117;       /* page bg, splash */
  --c-surface-1:    #161b22;       /* card, input */
  --c-surface-2:    #21262d;       /* hover */
  --c-surface-3:    #30363d;       /* border, divider */
  --c-surface-4:    #484f58;       /* border-strong, focus rest */

  /* ---------- Color · Text ---------- */
  --c-text:         #e6edf3;
  --c-text-muted:   #8b949e;
  --c-text-subtle:  #6e7681;
  --c-text-link:    #58a6ff;
  --c-text-link-2:  #79c0ff;

  /* ---------- Color · Brand / Semantic ---------- */
  --c-blue-400:     #388bfd;
  --c-blue-500:     #1f6feb;       /* PRIMARY */
  --c-blue-600:     #1a5fd9;
  --c-blue-glow:    rgba(31,111,235,.35);

  --c-purple-500:   #8957e5;       /* used only in brand mark + section dividers */
  --c-purple-600:   #6e40c9;

  --c-green-400:    #3fb950;
  --c-green-500:    #2ea043;       /* success indicator only */

  --c-yellow-500:   #d29922;       /* warn */
  --c-red-400:      #f85149;       /* danger */
  --c-red-500:      #da3633;

  /* ---------- Color · Gradients (restrained — 2 only) ---------- */
  --grad-primary:   linear-gradient(180deg, #388bfd 0%, #1f6feb 100%);
  --grad-primary-h: linear-gradient(180deg, #58a6ff 0%, #388bfd 100%);
  --grad-brand:     linear-gradient(135deg, #1f6feb 0%, #6e40c9 100%);

  /* ---------- Typography ---------- */
  --font-ui:    "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "Consolas", "Cascadia Code", "SF Mono", ui-monospace, Menlo, monospace;

  --fs-11: 11px;  /* caption uppercase */
  --fs-12: 12px;  /* helper, status */
  --fs-13: 13px;  /* base ui */
  --fs-14: 14px;  /* mobile base */
  --fs-15: 15px;  /* paragraph */
  --fs-16: 16px;  /* mobile primary */
  --fs-18: 18px;  /* h4 */
  --fs-20: 20px;  /* h3 */
  --fs-24: 24px;  /* h2 */
  --fs-32: 32px;  /* h1 */
  --fs-44: 44px;  /* display */

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

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  /* ---------- Spacing (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;    /* checkbox, tag */
  --r-sm: 6px;    /* small button */
  --r-md: 8px;    /* button, input */
  --r-lg: 10px;   /* card */
  --r-xl: 12px;   /* card-strong, modal */
  --r-2xl:16px;   /* sheet, hero */
  --r-full: 999px;

  /* ---------- Borders ---------- */
  --bd:        1px solid var(--c-surface-3);
  --bd-strong: 1px solid var(--c-surface-4);
  --bd-focus:  1px solid var(--c-blue-500);

  /* ---------- Elevation (no drop shadows in flat surfaces;
                 shadows only for overlays — modal, popover, sheet) ---------- */
  --elev-card:    inset 0 0 0 1px var(--c-surface-3);
  --elev-pop:     0 8px 24px rgba(0,0,0,.4),
                  inset 0 0 0 1px var(--c-surface-3);
  --elev-modal:   0 24px 64px rgba(0,0,0,.6),
                  inset 0 0 0 1px var(--c-surface-3);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ---------- Layout ---------- */
  --layout-max:       1440px;
  --layout-sidebar:   280px;
  --layout-panel:     340px;
  --layout-toolbar-h: 56px;

  /* ---------- Hit targets (WCAG / touch) ---------- */
  --hit-desktop: 36px;
  --hit-touch:   44px;

  /* ---------- Z-index scale ---------- */
  --z-base:    1;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ---------- Breakpoints (for reference; use these media queries) ----------
   @media (max-width: 1279px) — tablet & below
   @media (max-width: 767px)  — phone
   @media (hover: none)       — touch device
   @media (prefers-reduced-motion: reduce) — disable transitions
   --------------------------------------------------------------------- */

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 767px) {
  html, body { font-size: var(--fs-14); }
}

h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--c-text-link); text-decoration: none; }
a:hover { color: var(--c-text-link-2); }

::selection { background: var(--c-blue-glow); color: var(--c-text); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-surface-3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-surface-4); }

/* Focus ring — keyboard only */
:focus-visible {
  outline: 2px solid var(--c-blue-500);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}