/* Speedcut.pl - system projektowy. Industrial precision: molten orange + grafit. */
:root {
  /* Marka */
  --sc-orange:      #D54900;
  --sc-orange-600:  #B83E00;
  --sc-orange-700:  #99340A;
  --sc-orange-050:  #FFF1E9;
  --sc-ink:         #2B2A29;  /* grafit z logo */
  --sc-ink-900:     #1A1918;
  --sc-ink-800:     #232221;

  /* Stal / neutrale */
  --steel-000: #FFFFFF;
  --steel-025: #F7F8F9;
  --steel-050: #F1F3F5;
  --steel-100: #E5E8EB;
  --steel-200: #D2D7DC;
  --steel-300: #B4BBC2;
  --steel-400: #8A929B;
  --steel-500: #626A72;
  --steel-600: #454C53;
  --steel-700: #2F343A;

  /* Warianty terminowe (semantyka: szybko/drogo → tanio/wolno) */
  --t-asap:     #FF0000;  /* pilne - najpopularniejszy czerwony (web red) */
  --t-speed:    #D54900;  /* szybko - pomarańcz marki (logo) */
  --t-standard: #FFFF00;  /* standard - najpopularniejszy żółty (web yellow) */
  --t-eko:      #1F9D57;  /* najtaniej (zielony) */
  /* warianty „ink" - czytelne jako TEKST na białym (WCAG); pełny czerwony/żółty jako tekst słabo czytelny → ciemniejsze */
  --t-asap-ink:     #D50000;
  --t-standard-ink: #E3A900;  /* złocista żółć - spójna wszędzie (strona, panel, ustawienia) */
  --t-eko-ink:      #178048;

  /* Sygnały */
  --ok:    #1F9D57;
  --ok-050:#E7F6ED;
  --warn:  #E8A400;
  --warn-050:#FDF4E0;
  --err:   #D23B2E;
  --err-050:#FCEBE9;
  --info:  #2E6BD6;

  /* Powierzchnie / tekst */
  --bg:        var(--steel-025);
  --surface:   var(--steel-000);
  --surface-2: var(--steel-050);
  --border:    var(--steel-100);
  --border-strong: var(--steel-200);
  --text:      var(--sc-ink);
  --text-soft: var(--steel-500);
  --text-mut:  var(--steel-400);
  --on-dark:   #EDEFF1;
  --on-dark-soft: #A9B0B7;

  /* Typografia */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Code", Consolas, monospace;
  --fw-normal: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800;

  /* Skala odstępów (4px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* Promienie / cienie */
  --r-sm: 4px; --r: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(24,26,28,.06), 0 1px 3px rgba(24,26,28,.04);
  --sh-2: 0 4px 12px rgba(24,26,28,.08), 0 2px 4px rgba(24,26,28,.05);
  --sh-3: 0 12px 32px rgba(24,26,28,.12), 0 4px 8px rgba(24,26,28,.06);
  --sh-orange: 0 8px 24px rgba(213,73,0,.28);

  --container: 1200px;
  --header-h: 68px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }  /* atrybut hidden musi wygrywać nad display:flex/grid */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.6;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.12; font-weight: var(--fw-bold); letter-spacing: -0.02em; }
:focus-visible { outline: 3px solid var(--sc-orange); outline-offset: 2px; border-radius: 3px; }