:root {
  /* Kolory marki */
  --bg: #0B1220;            /* granat — tło sekcji ciemnych */
  --bg-soft: #101a2e;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --ink: #0e1726;           /* tekst na jasnym */
  --ink-soft: #5b6b83;
  --line: #e6eaf2;

  --accent: #22c55e;        /* zieleń — "pasuje" */
  --accent-ink: #052e16;
  --primary: #2563eb;       /* niebieski — akcje */
  --warn: #f59e0b;
  --danger: #ef4444;

  --grad: linear-gradient(135deg, #2563eb 0%, #22c55e 100%);

  /* Typografia — systemowa, zero webfontów = lekkość */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Kształt */
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(14, 23, 38, .10);
  --shadow-lg: 0 24px 60px rgba(14, 23, 38, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--surface); }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 999px; border: 0;
  font-weight: 600; font-size: .95rem; cursor: pointer;
  text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 20px rgba(37, 99, 235, .35); }
.btn-ghost   { background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.25); }
.btn-light   { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

.badge {
  display: inline-block; padding: .25rem .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600;
}
.badge-green  { background: #dcfce7; color: #166534; }
.badge-amber  { background: #fef3c7; color: #92400e; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-gray   { background: #eef1f6; color: #475569; }

.input {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font: inherit; background: #fff;
}
.input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }