/* =====================================================================
   KREATOR SYSTEMU — MOTYWY
   Każdy motyw to wyłącznie zestaw zmiennych. Dodanie nowego = dopisanie
   bloku [data-theme="..."] + wpisu w THEMES w catalog.js. Zero zmian w JS.
   ===================================================================== */

:root{
  --font-disp:'Chakra Petch',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --w-title:700;
  --r:3px;
  --grid-sm:20px;
  --grid-lg:100px;
  --accent:#ff8a1e;
  --on-accent:#1a0d00;
}

/* =========================== 1. RYSUNEK TECHNICZNY =========================== */
[data-theme="blueprint"]{
  --bg:#0a0d10;
  --bg-2:#0f1418;
  --bg-blur:rgba(10,13,16,.88);
  --panel:#131a20;
  --panel-2:#182129;
  --panel-soft:rgba(19,26,32,.55);
  --panel-grad:linear-gradient(160deg,#131a20,#0f1418);
  --line:#243039;
  --line-2:#2f3d48;
  --fg:#e6eef3;
  --fg-2:#a9bcc7;
  --muted:#7d919e;
  --dep:#3fb9c9;
  --ok:#4fbf7a;
  --ok-wash:rgba(79,191,122,.09);
  --grid:rgba(125,145,158,.07);
  --grid-bold:rgba(125,145,158,.13);
  --glow:radial-gradient(ellipse 90% 60% at 50% -10%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 60%),
         radial-gradient(ellipse 60% 50% at 100% 100%,rgba(63,185,201,.07),transparent 60%);
  --grain:none;
  --grain-opacity:0;
  --grain-size:auto;
  --grain-blend:normal;
  --shadow:0 18px 50px -18px rgba(0,0,0,.85);
  --on-accent:#120800;
}

/* =========================== 2. GRAWIURA (mono, halftone) =========================== */
[data-theme="grawiura"]{
  --bg:#f4f2ee;
  --bg-2:#eae7e1;
  --bg-blur:rgba(244,242,238,.9);
  --panel:#ffffff;
  --panel-2:#f7f5f1;
  --panel-soft:rgba(255,255,255,.6);
  --panel-grad:linear-gradient(160deg,#ffffff,#f0ede8);
  --line:#d3cec5;
  --line-2:#b8b2a7;
  --fg:#14120f;
  --fg-2:#403c36;
  --muted:#787166;
  --dep:#14120f;
  --ok:#2f7d4c;
  --ok-wash:rgba(47,125,76,.10);
  --grid:rgba(20,18,15,.05);
  --grid-bold:rgba(20,18,15,.09);
  --glow:radial-gradient(ellipse 80% 50% at 50% -5%,rgba(20,18,15,.06),transparent 62%);
  /* halftone: siatka punktów jak w druku wklęsłym */
  --grain:radial-gradient(circle at 1px 1px,rgba(20,18,15,.55) .9px,transparent 1px);
  --grain-opacity:.14;
  --grain-size:4px 4px;
  --grain-blend:multiply;
  --shadow:0 14px 38px -20px rgba(20,18,15,.45);
  --w-title:700;
  --on-accent:#ffffff;
}

/* =========================== 3. STAL (jasny techniczny) =========================== */
[data-theme="stal"]{
  --bg:#eef2f5;
  --bg-2:#e3e9ee;
  --bg-blur:rgba(238,242,245,.9);
  --panel:#ffffff;
  --panel-2:#f4f7f9;
  --panel-soft:rgba(255,255,255,.65);
  --panel-grad:linear-gradient(160deg,#ffffff,#eaeff3);
  --line:#ccd6dd;
  --line-2:#aab8c2;
  --fg:#0f1a22;
  --fg-2:#3a4b57;
  --muted:#6b7d8a;
  --dep:#2b7f95;
  --ok:#2f7d4c;
  --ok-wash:rgba(47,125,76,.10);
  --grid:rgba(43,80,105,.055);
  --grid-bold:rgba(43,80,105,.10);
  --glow:radial-gradient(ellipse 85% 55% at 50% -8%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 62%);
  --grain:none;
  --grain-opacity:0;
  --grain-size:auto;
  --grain-blend:normal;
  --shadow:0 14px 40px -20px rgba(15,26,34,.35);
  --on-accent:#ffffff;
}

/* ---------- warianty gęstości siatki (edytor wyglądu) ---------- */
[data-grid="off"]{--grid:transparent;--grid-bold:transparent}
[data-grid="rzadka"]{--grid-sm:32px;--grid-lg:160px}
[data-grid="gesta"]{--grid-sm:12px;--grid-lg:60px}

/* ---------- warianty narożników ---------- */
[data-corners="ostre"]{--r:0px}
[data-corners="lekkie"]{--r:3px}
[data-corners="miekkie"]{--r:10px}

/* ---------- pochodne akcentu (liczone z --accent, więc działa dla dowolnego koloru) ---------- */
:root{
  --accent-wash:color-mix(in srgb,var(--accent) 11%,transparent);
  --accent-dim:color-mix(in srgb,var(--accent) 55%,var(--bg));
  --accent-grad:linear-gradient(160deg,color-mix(in srgb,var(--accent) 13%,transparent),transparent);
}