/* PlexiSystem Design System v4 — Tokens (updated 2026-04-19) */
/* Synced with plexisystem.pl v4.css (teal + purple + blue aurora) */
/* Shared across PlexiOS v2, PlexiFlow, plexisystem.pl */

:root {
  /* Backgrounds (v4 lekko niebieskawe) */
  --ps-bg: #0d1117;
  --ps-bg-subtle: #141a23;
  --ps-bg-card: #1a2230;
  --ps-bg-card-hover: #212b3c;
  --ps-bg-elevated: #2a3648;

  /* Text */
  --ps-text: #f4f5f7;
  --ps-text-muted: #a8aeb8;
  --ps-text-dim: #6c7281;
  --ps-text-inverse: #001a16;

  /* Accent — v4 TEAL (z plexisystem.pl) */
  --ps-accent: #00d1b2;
  --ps-accent-hover: #3bdcc5;
  --ps-accent-dim: #009c85;
  --ps-accent-glow: rgba(0, 209, 178, 0.12);
  --ps-accent-glow-md: rgba(0, 209, 178, 0.22);
  --ps-accent-glow-strong: rgba(0, 209, 178, 0.35);

  /* Dodatkowe akcenty v4 */
  --ps-accent-2: #7c5cff;  /* purple */
  --ps-accent-3: #3b82f6;  /* blue */

  /* Semantic */
  --ps-success: #22c55e;
  --ps-success-dim: #16a34a;
  --ps-warning: #f59e0b;
  --ps-warning-dim: #d97706;
  --ps-error: #ef4444;
  --ps-error-dim: #dc2626;
  --ps-info: #06b6d4;

  /* Glass */
  --ps-glass: rgba(255, 255, 255, 0.03);
  --ps-glass-hover: rgba(255, 255, 255, 0.06);
  --ps-glass-blur: 20px;
  --ps-glass-border: rgba(255, 255, 255, 0.08);

  /* Borders */
  --ps-border: rgba(255, 255, 255, 0.06);
  --ps-border-hover: rgba(255, 255, 255, 0.12);
  --ps-border-active: rgba(255, 255, 255, 0.20);

  /* Typography */
  --ps-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ps-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  --ps-text-xs: 0.6875rem;
  --ps-text-sm: 0.8125rem;
  --ps-text-base: 0.875rem;
  --ps-text-md: 0.9375rem;
  --ps-text-lg: 1rem;
  --ps-text-xl: 1.125rem;
  --ps-text-2xl: 1.5rem;
  --ps-text-3xl: 2rem;

  /* Spacing */
  --ps-space-1: 4px;
  --ps-space-2: 8px;
  --ps-space-3: 12px;
  --ps-space-4: 16px;
  --ps-space-5: 20px;
  --ps-space-6: 24px;
  --ps-space-8: 32px;
  --ps-space-10: 40px;
  --ps-space-12: 48px;

  /* Radius */
  --ps-radius-sm: 6px;
  --ps-radius: 10px;
  --ps-radius-md: 12px;
  --ps-radius-lg: 16px;
  --ps-radius-xl: 24px;
  --ps-radius-full: 9999px;

  /* Shadows */
  --ps-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --ps-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --ps-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3);
  --ps-shadow-glow: 0 8px 30px var(--ps-accent-glow-strong);

  /* Transitions */
  --ps-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ps-duration: 200ms;
  --ps-duration-slow: 400ms;

  /* Layout */
  --ps-max-width: 900px;
  --ps-safe-top: env(safe-area-inset-top, 0px);
  --ps-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Z-index */
  --ps-z-sticky: 100;
  --ps-z-overlay: 200;
  --ps-z-modal: 300;
  --ps-z-toast: 400;
}

/* ========== AURORA BG (v4) — global, używane na każdej stronie ========== */
.aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.aurora::before, .aurora::after {
  content: ""; position: absolute; width: 900px; height: 900px;
  border-radius: 50%; filter: blur(120px); opacity: 0.22;
  mix-blend-mode: screen; will-change: transform;
}
.aurora::before {
  background: radial-gradient(circle, #00d1b2, transparent 70%);
  top: -300px; left: -200px;
  animation: ps-drift1 28s ease-in-out infinite;
}
.aurora::after {
  background: radial-gradient(circle, #7c5cff, transparent 70%);
  bottom: -400px; right: -200px;
  animation: ps-drift2 32s ease-in-out infinite;
}
.aurora-3 {
  position: fixed; width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, #3b82f6, transparent 70%);
  filter: blur(120px); opacity: 0.14; mix-blend-mode: screen;
  top: 40%; left: 50%; transform: translate(-50%, -50%);
  animation: ps-drift3 40s ease-in-out infinite;
  z-index: 0; pointer-events: none;
}
@keyframes ps-drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40vw, 30vh) scale(1.15); }
  66%      { transform: translate(20vw, 60vh) scale(0.9); }
}
@keyframes ps-drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-30vw, -40vh) scale(0.85); }
  66%      { transform: translate(-50vw, -20vh) scale(1.2); }
}
@keyframes ps-drift3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-30%, -70%) scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after, .aurora-3 { animation: none; }
}

@media (max-width: 768px) {
  :root {
    --ps-text-2xl: 1.25rem;
    --ps-text-3xl: 1.5rem;
  }
}