/*
 * theme.css - jedyne miejsce z wygladem: kolory, tla sekcji, kroje, cienie,
 * promienie i sciecia (clip-path). main.css nie zawiera ani jednego
 * literalu koloru, tylko var(--...).
 *
 * Wariant A (czarna dominanta) = [data-tone="dark"] (domyslny, takze :root).
 * [data-tone="light"] to tokeny sekcji jasnych (wariant C, etap 7): zmiana
 * wariantu = podmiana tego pliku + atrybut data-tone na sekcjach.
 * Tokeny tonu deklarujemy w obu blokach, bo zlozone wartosci (gradienty)
 * rozwiazuja var(--bg) na elemencie, na ktorym sa zadeklarowane.
 */

/* ---------- tokeny wspolne (niezalezne od tonu) ---------- */
:root{
  /* marka */
  --red:#E30613;
  --red-hot:#FF1F2D;
  --black:#0B0B0C;
  --white:#fff;
  --on-red:#fff;                        /* tekst na czerwonym tle */
  --mask-on:#000;                       /* kolor maski (liczy sie tylko alfa) */

  /* alfa czerwieni (poswiaty, ramki, tla) */
  --red-a10:rgba(227,6,19,.10);
  --red-a20:rgba(227,6,19,.20);
  --red-a22:rgba(227,6,19,.22);
  --red-a25:rgba(227,6,19,.25);
  --red-a28:rgba(227,6,19,.28);
  --red-a34:rgba(227,6,19,.34);
  --red-a35:rgba(227,6,19,.35);
  --red-a40:rgba(227,6,19,.40);
  --red-a45:rgba(227,6,19,.45);
  --red-a50:rgba(227,6,19,.50);
  --red-a55:rgba(227,6,19,.55);
  --red-a60:rgba(227,6,19,.60);
  --red-a70:rgba(227,6,19,.70);
  --red-a80:rgba(227,6,19,.80);

  /* przyciski na czerwonym tle */
  --btn-wht-bg:#fff;
  --btn-wht-text:#0B0B0C;
  --skip-bg:#fff;
  --skip-text:#000;
  --ship-stripes:repeating-linear-gradient(115deg,rgba(0,0,0,0) 0 26px,rgba(0,0,0,.11) 26px 52px);

  /* kroje */
  --head:'Chakra Petch','Rajdhani',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,Consolas,monospace;

  /* uklad */
  --wrap:1240px;
  --pad:clamp(16px,4vw,32px);
  --hdr-h:68px;
  --mbar-h:62px;
  --sec-pad:clamp(64px,9vw,120px);

  /* promienie */
  --radius-pill:99px;
  --radius-sm:4px;
  --radius-xs:2px;
  --radius-round:50%;

  /* sciecia (clip-path) */
  --clip-btn:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  --clip-btn-lg:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  --clip-chip:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  --clip-dyno:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);
  --clip-map:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px));
  --clip-mf:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px));
  --clip-corner-20:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
  --clip-corner-22:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
  --clip-corner-26:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
  --clip-corner-28:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);
  --clip-corner-30:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%);
  --clip-corner-34:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);
  --clip-wedge:polygon(0 100%,100% 0,100% 100%);
  --clip-bar:polygon(0 25%,100% 0,100% 100%,0 100%);
  --clip-bar-skew:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%);
}

/* ---------- ton ciemny (wariant A; domyslny) ---------- */
:root,
[data-tone="dark"]{
  --bg:#0B0B0C;
  --bg-2:#111113;
  --surface:#161618;
  --surface-2:#1D1D20;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#fff;
  --text-2:#D0D0D5;
  --muted:#A6A6AD;
  --nav-link:#D8D8DC;
  --accent-text:#FF4652;                /* drobny czerwony tekst, kontrast AA na czerni */
  --focus:#fff;

  --ghost-bg:rgba(255,255,255,.06);
  --ghost-bg-hover:rgba(255,255,255,.12);
  --chip-bg:rgba(255,255,255,.04);
  --card-soft:rgba(255,255,255,.04);
  --toggle-on-bg:#fff;
  --toggle-on-text:#000;
  --bar-dim:#3a3a3e;
  --track:rgba(255,255,255,.08);
  --bar-fill:#fff;
  --strike:rgba(255,255,255,.3);

  /* naglowek, pasek mobilny, stopka */
  --hdr-bg:rgba(11,11,12,.82);
  --hdr-glow:linear-gradient(90deg,transparent,var(--red-a70),transparent);
  --mbar-bg:rgba(11,11,12,.95);
  --footer-bg:#070708;

  /* tla sekcji */
  --hero-bg:radial-gradient(60% 70% at 85% 95%,var(--red-a34),transparent 65%),
            radial-gradient(40% 50% at 10% 0%,var(--red-a10),transparent 70%),
            var(--bg);
  --network-bg:radial-gradient(70% 55% at 30% 40%,var(--red-a20),transparent 70%),
               linear-gradient(180deg,#120406 0%,#0d0708 40%,var(--bg) 100%);
  --network-dot:rgba(255,255,255,.12);
  --contact-glow:radial-gradient(50% 70% at 50% 110%,var(--red-a40),transparent 70%);
  --mapfix-glow:radial-gradient(50% 80% at 85% 50%,var(--red-a25),transparent 70%);

  /* karty i panele */
  --dyno-bg:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  --svc-mf-bg:linear-gradient(135deg,#240509,var(--surface) 70%);
  --map-bg:rgba(0,0,0,.35);
  --map-fill:#17171a;
  --map-stroke:rgba(255,255,255,.35);
  --map-grid:rgba(255,255,255,.05);
  --label-halo:#0B0B0C;                 /* obrys etykiet i wypelnienie pinezek reflash */
  --pin-stroke:#fff;
  --shop-bg:rgba(0,0,0,.4);
  --b2b-bg:linear-gradient(100deg,var(--red-a22),rgba(255,255,255,.04) 60%);
  --photo-fade:linear-gradient(180deg,transparent 55%,rgba(11,11,12,.55));
  --caption-bg:rgba(11,11,12,.8);
  --readout-bg:rgba(0,0,0,.4);
  --ph-bg:radial-gradient(80% 90% at 80% 100%,var(--red-a40),transparent 70%),
          linear-gradient(135deg,#1c1c1f,#0e0e10);
  --mf-box-bg:linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.01));

  /* poswiaty */
  --glow-drop:drop-shadow(0 0 18px var(--red-a45));
  --glow-logo-drop:drop-shadow(0 0 28px var(--red-a45));
  --glow-hero-text:0 0 38px var(--red-a55);
  --glow-contact-text:0 0 40px var(--red-a55);
  --glow-feat-text:0 0 44px var(--red-a55);
  --glow-num-text:0 0 22px var(--red-a60);
  --glow-res-text:0 0 28px var(--red-a50);
  --glow-dot:0 0 10px var(--red);
  --glow-bar:0 0 14px var(--red-a80);
  --glow-bar-after:0 0 14px var(--red);
  --glow-chip:0 0 22px var(--red-a50);
}

/* ---------- ton jasny (wariant C, etap 7; wartosci robocze) ---------- */
[data-tone="light"]{
  --bg:#FFFFFF;
  --bg-2:#F6F6F7;
  --surface:#FFFFFF;
  --surface-2:#F6F6F7;
  --line:#E4E5E8;
  --line-2:#CED0D5;
  --text:#0B0B0C;
  --text-2:#2E2F33;
  --muted:#5F6168;
  --nav-link:#2E2F33;
  --accent-text:#C10510;
  --focus:#E30613;

  --ghost-bg:rgba(11,11,12,.04);
  --ghost-bg-hover:rgba(11,11,12,.08);
  --chip-bg:rgba(11,11,12,.04);
  --card-soft:rgba(11,11,12,.03);
  --toggle-on-bg:#0B0B0C;
  --toggle-on-text:#fff;
  --bar-dim:#CED0D5;
  --track:rgba(11,11,12,.10);
  --bar-fill:#0B0B0C;
  --strike:rgba(11,11,12,.3);

  --hdr-bg:rgba(255,255,255,.88);
  --hdr-glow:linear-gradient(90deg,transparent,var(--red-a70),transparent);
  --mbar-bg:rgba(255,255,255,.95);
  --footer-bg:#F6F6F7;

  --hero-bg:radial-gradient(60% 70% at 85% 95%,var(--red-a20),transparent 65%),
            radial-gradient(40% 50% at 10% 0%,var(--red-a10),transparent 70%),
            var(--bg);
  --network-bg:radial-gradient(70% 55% at 30% 40%,var(--red-a10),transparent 70%),
               linear-gradient(180deg,#FDEBEC 0%,#FFFFFF 60%,var(--bg) 100%);
  --network-dot:rgba(11,11,12,.10);
  --contact-glow:radial-gradient(50% 70% at 50% 110%,var(--red-a25),transparent 70%);
  --mapfix-glow:radial-gradient(50% 80% at 85% 50%,var(--red-a10),transparent 70%);

  --dyno-bg:linear-gradient(180deg,rgba(11,11,12,.04),rgba(11,11,12,.01));
  --svc-mf-bg:linear-gradient(135deg,#FDEBEC,var(--surface) 70%);
  --map-bg:rgba(11,11,12,.03);
  --map-fill:#F0F0F2;
  --map-stroke:rgba(11,11,12,.35);
  --map-grid:rgba(11,11,12,.06);
  --label-halo:#FFFFFF;
  --pin-stroke:#0B0B0C;
  --shop-bg:#FFFFFF;
  --b2b-bg:linear-gradient(100deg,var(--red-a20),rgba(11,11,12,.03) 60%);
  --photo-fade:linear-gradient(180deg,transparent 55%,rgba(11,11,12,.35));
  --caption-bg:rgba(11,11,12,.8);
  --readout-bg:rgba(11,11,12,.04);
  --ph-bg:radial-gradient(80% 90% at 80% 100%,var(--red-a25),transparent 70%),
          linear-gradient(135deg,#ECECEE,#DADADE);
  --mf-box-bg:linear-gradient(120deg,rgba(11,11,12,.04),rgba(11,11,12,.01));

  --glow-drop:none;
  --glow-logo-drop:none;
  --glow-hero-text:none;
  --glow-contact-text:none;
  --glow-feat-text:none;
  --glow-num-text:none;
  --glow-res-text:none;
  --glow-dot:none;
  --glow-bar:none;
  --glow-bar-after:none;
  --glow-chip:none;
}