/* hurtownianozy.pl — tokeny warstwy projektowej (Krok 2a §11).
   Przeniesione z systemu projektowego w Claude Design bez zmiany wartości.
   Kroje ładuje osobny fonts.css (pliki lokalne, nie CDN). */

/* ---------- Kolor ---------- */
:root{
  /* Marka. Pomarańcz spróbkowany z logo: #F15406 */
  --brand-50:#FFF3EC; --brand-100:#FFE2D2; --brand-200:#FFC4A6;
  --brand-300:#FF9C6C; --brand-400:#FA7534; --brand-500:#F15406;
  --brand-600:#D84604; --brand-700:#AE3703; --brand-800:#7C2702;

  /* Stal / neutralne. Baza #12161B, tekstowy grafit z logo #353537 */
  --steel-0:#FFFFFF;  --steel-25:#FAFBFC; --steel-50:#F5F6F8; --steel-100:#EDEFF2;
  --steel-200:#DFE3E8; --steel-300:#C6CCD4; --steel-400:#9AA3AE; --steel-500:#6E7885;
  --steel-600:#4E5661; --steel-700:#353A42; --steel-800:#1F242B; --steel-900:#12161B;
  --steel-950:#0B0E12;

  /* Semantyczne */
  --green-500:#0F7A38; --green-50:#E8F5EC;
  --amber-500:#B26A00; --amber-50:#FDF3E2;
  --red-500:#C0261C;   --red-50:#FBEAE8;
  --blue-500:#1C4B8A;  --blue-50:#E9F0F9;

  /* Aliasy semantyczne — tych używają komponenty */
  --text-strong:var(--steel-900);
  --text-body:var(--steel-700);
  --text-muted:var(--steel-500);
  --text-inverse:var(--steel-0);
  --text-brand:var(--brand-600);
  --text-link:var(--brand-600);
  --text-link-hover:var(--brand-700);

  --surface-page:var(--steel-0);
  --surface-sunken:var(--steel-50);
  --surface-card:var(--steel-0);
  --surface-raised:var(--steel-0);
  --surface-dark:var(--steel-900);
  --surface-dark-alt:var(--steel-800);
  --surface-brand:var(--brand-500);
  --surface-brand-soft:var(--brand-50);

  --border-subtle:var(--steel-100);
  --border-default:var(--steel-200);
  --border-strong:var(--steel-300);
  --border-dark:rgb(255 255 255 / .12);
  --focus-ring:0 0 0 3px rgb(241 84 6 / .32);

  /* Ceny (§2). Cena sprzedaży zawsze w czerni — czytelność przed kolorem.
     Zieleń niesie oszczędność, pomarańcz procent rabatu. */
  --price-current:var(--steel-900);
  --price-catalog:var(--steel-400);
  --price-discount:var(--brand-600);
  --price-savings:var(--green-500);
  --price-omnibus:var(--steel-500);

  /* Stany dostępności */
  --stock-in:var(--green-500);
  --stock-low:var(--amber-500);
  --stock-out:var(--steel-500);

  /* Powierzchnie trójwymiarowe: metal, fazy, światło */
  --metal-face:linear-gradient(180deg,#F7F8FA 0%,#E7EAEE 48%,#D6DBE1 100%);
  --metal-dark:linear-gradient(180deg,#2A3038 0%,#171C22 55%,#0D1116 100%);
  --bevel-light:inset 0 1px 0 rgb(255 255 255 / .85);
  --bevel-dark:inset 0 -1px 0 rgb(18 22 27 / .10);
  --bevel-on-dark:inset 0 1px 0 rgb(255 255 255 / .10);
  --spotlight:radial-gradient(80% 120% at 50% -10%, rgb(255 255 255 / .10) 0%, transparent 65%);
}

/* ---------- Typografia ---------- */
:root{
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --text-3xs:11px; --text-2xs:12px; --text-xs:13px; --text-sm:14px;
  --text-base:16px; --text-md:18px; --text-lg:20px; --text-xl:24px;
  /* Trzy największe stopnie skalują się z szerokością ekranu. Na desktopie
     wychodzą dokładnie te same 30/38/48 px co w systemie projektowym; na
     telefonie schodzą tyle, ile trzeba, żeby jeden długi wyraz — „hurtownianozy.pl"
     w hero, nazwa marki w wersalikach — nie był szerszy od ekranu. */
  --text-2xl:clamp(24px,5.5vw,30px);
  --text-3xl:clamp(28px,6.5vw,38px);
  --text-4xl:clamp(28px,8.5vw,48px);
  --text-5xl:62px;

  --leading-tight:1.12; --leading-snug:1.25; --leading-normal:1.55; --leading-loose:1.7;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-caps:0.14em;

  --type-hero:var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h2:var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-display);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --type-small:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-label:var(--weight-semibold) var(--text-2xs)/1.2 var(--font-body);
  --type-price:var(--weight-bold) var(--text-xl)/1.1 var(--font-display);
  --type-mono:var(--weight-regular) var(--text-xs)/1.4 var(--font-mono);
}

/* ---------- Przestrzeń ---------- */
:root{
  --space-unit:8px;
  --space-0:0px;  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px;

  --container-max:1280px;
  /* Na telefonie 2×24 px marginesu to 13% szerokości ekranu oddane pod nic.
     Poniżej 600 px schodzimy do 16 px, wyżej zostaje 24 px jak było. */
  --container-pad:clamp(16px,4vw,24px);
  --grid-gutter:20px;
  --section-gap:clamp(40px,8vw,64px);
  --card-pad:16px;
  --control-h-sm:32px; --control-h-md:40px; --control-h-lg:48px;
}

/* ---------- Zaokrąglenia ---------- */
:root{
  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:10px;
  --radius-xl:16px; --radius-pill:999px;
}

/* ---------- Głębia ---------- */
:root{
  --shadow-hairline:0 0 0 1px var(--border-default);
  --shadow-xs:0 1px 2px rgb(18 22 27 / .06);
  --shadow-sm:0 1px 3px rgb(18 22 27 / .10), 0 1px 1px rgb(18 22 27 / .04);
  --shadow-md:0 4px 10px -2px rgb(18 22 27 / .12), 0 2px 4px -2px rgb(18 22 27 / .08);
  --shadow-lg:0 12px 28px -8px rgb(18 22 27 / .18), 0 4px 8px -4px rgb(18 22 27 / .10);
  --shadow-xl:0 28px 60px -18px rgb(18 22 27 / .28), 0 8px 16px -8px rgb(18 22 27 / .12);
  --shadow-brand:0 8px 20px -6px rgb(241 84 6 / .38);
  --shadow-inset-well:inset 0 2px 4px rgb(18 22 27 / .08);
}

/* ---------- Ruch ---------- */
:root{
  --ease-out:cubic-bezier(.2,.8,.3,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-instant:80ms; --dur-fast:140ms; --dur-base:220ms; --dur-slow:380ms;
  --transition-control:background-color var(--dur-fast) var(--ease-out),
                       border-color var(--dur-fast) var(--ease-out),
                       color var(--dur-fast) var(--ease-out),
                       box-shadow var(--dur-fast) var(--ease-out),
                       transform var(--dur-fast) var(--ease-out);
  --lift-hover:translateY(-2px);
  --press-scale:scale(.985);
}
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms;
    --lift-hover:none; --press-scale:none;
  }
}