/* ============================================================
   BASE — wspólna baza dla wszystkich ekranów
   (html/body, backgrounds, particle canvas, dark mode)
   ============================================================ */

html, body {
  height: 100%;
}

body {
  background: var(--color-bg-main);
  background-attachment: fixed;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ============================================================
   TŁO — LIGHT MODE: subtelna tekstura warm dots
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0,
    rgba(232,114,92,0.022) 6px
  );
}

/* ============================================================
   TŁO — DARK MODE: Aurora 4 blobs + noise overlay
   ============================================================ */
[data-theme="dark"] body::before {
  inset: 0;
  filter: blur(55px);
  background:
    radial-gradient(ellipse 280px 260px at 22% 12%, rgba(91,33,182,0.30) 0%, transparent 70%),
    radial-gradient(ellipse 240px 220px at 78% 28%, rgba(190,24,93,0.24) 0%, transparent 70%),
    radial-gradient(ellipse 320px 300px at 45% 78%, rgba(29,78,216,0.20) 0%, transparent 70%),
    radial-gradient(ellipse 180px 160px at 68% 52%, rgba(217,119,6,0.10) 0%, transparent 70%);
  animation: pg-aurora 22s ease-in-out infinite alternate;
  background-attachment: fixed;
}

@keyframes pg-aurora {
  0%   { transform: translate(0,     0)    scale(1);    }
  30%  { transform: translate(18px, -28px) scale(1.05); }
  65%  { transform: translate(-14px, 22px) scale(0.96); }
  100% { transform: translate(28px,  12px) scale(1.03); }
}

/* Noise grain overlay — tylko dark mode */
[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Particle canvas (dark mode only) */
#bg-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}

[data-theme="dark"] #bg-canvas {
  opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] body::before { animation: none !important; }
  #bg-canvas { display: none !important; }
}

/* Dark mode — zwiększona czytelność secondary text */
[data-theme="dark"] {
  --color-text-secondary: rgba(220, 212, 255, 0.78);
}

[data-theme="dark"] body {
  background: #07061A;
}

/* ============================================================
   LAYOUT — kontener strony
   ============================================================ */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-16);
  padding-bottom: 100px;
  position: relative;
  z-index: 1;
}

@media (min-width: 480px) {
  .page {
    padding: var(--space-24);
    padding-bottom: 100px;
  }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.d-none   { display: none !important; }
.d-flex   { display: flex; }
.w-full   { width: 100%; }
.mb-0     { margin-bottom: 0 !important; }
.mb-8     { margin-bottom: var(--space-8); }
.mb-12    { margin-bottom: var(--space-12); }
.mt-8     { margin-top: var(--space-8); }

.flex-row-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-row-gap {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.text-small-secondary {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
  margin: 0;
}

.text-small-bold-primary {
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.btn-small-ghost {
  font-size: var(--font-size-small);
  padding: var(--space-4) var(--space-8);
}

.section-gap { height: var(--space-24); }

.link-primary { color: var(--color-primary); }