/* Paletomat v2 — Silk Neomorphism
 * Soft UI: off-white continuous surface, indigo accents,
 * multi-layer diffused shadows + subtle inner glows. */

:root {
  --bg: #f8fafc;
  --bg-elev: #f1f5f9;
  --bg-card: #f0f4f9;
  --bg-card-solid: #eef2f7;
  --bg-deep: #e8edf4;

  --bg-section-overlay: rgba(248, 250, 252, 0.94);
  --bg-section-veil: rgba(241, 245, 249, 0.72);

  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-muted: #64748b;
  --ink-mute2: #94a3b8;
  --ink-mute3: #cbd5e1;

  --line: rgba(148, 163, 184, 0.18);
  --line-2: rgba(148, 163, 184, 0.28);
  --line-3: rgba(148, 163, 184, 0.38);
  --line-edge: rgba(99, 102, 241, 0.22);

  /* Indigo — główny akcent */
  --accent: #6366f1;
  --accent-bright: #818cf8;
  --accent-deep: #4f46e5;
  --accent-soft: rgba(99, 102, 241, 0.1);
  --accent-soft-2: rgba(99, 102, 241, 0.16);
  --accent-glow: rgba(99, 102, 241, 0.32);

  /* Aliasy kompatybilności z components.css */
  --cyan: #818cf8;
  --cyan-soft: rgba(129, 140, 248, 0.12);
  --cyan-glow: rgba(99, 102, 241, 0.28);

  --magenta: #a5b4fc;
  --magenta-soft: rgba(165, 180, 252, 0.14);
  --magenta-glow: rgba(129, 140, 248, 0.24);

  --violet: var(--accent);
  --violet-2: var(--accent-bright);
  --violet-deep: var(--accent-deep);
  --violet-edge: #c7d2fe;
  --magenta-deep: #6366f1;
  --indigo-deep: #4338ca;
  --cyan-rim: var(--cyan);
  --line-violet: var(--line-edge);

  --grad-brand: linear-gradient(135deg, #6366f1 0%, #818cf8 52%, #a5b4fc 100%);
  --grad-brand-soft: linear-gradient(160deg, rgba(99, 102, 241, 0.1), rgba(165, 180, 252, 0.06));
  --grad-aurora:
    radial-gradient(ellipse 70% 55% at 12% 18%, rgba(99, 102, 241, 0.09), transparent 58%),
    radial-gradient(ellipse 50% 45% at 88% 72%, rgba(165, 180, 252, 0.08), transparent 62%),
    radial-gradient(ellipse 90% 50% at 50% 105%, rgba(129, 140, 248, 0.05), transparent 70%);

  /* Neomorphism — warstwowe cienie */
  --neo-raised:
    10px 10px 22px rgba(148, 163, 184, 0.28),
    -10px -10px 22px rgba(255, 255, 255, 0.96),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(148, 163, 184, 0.06);
  --neo-soft:
    6px 6px 14px rgba(148, 163, 184, 0.2),
    -6px -6px 14px rgba(255, 255, 255, 0.88),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --neo-pressed:
    inset 5px 5px 12px rgba(148, 163, 184, 0.26),
    inset -5px -5px 12px rgba(255, 255, 255, 0.88),
    0 0 0 1px rgba(148, 163, 184, 0.08);
  --neo-float:
    16px 24px 48px rgba(148, 163, 184, 0.22),
    -8px -8px 24px rgba(255, 255, 255, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.6);
  --neo-indigo:
    0 14px 36px -10px rgba(99, 102, 241, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --neo-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 20px rgba(99, 102, 241, 0.04);

  --shadow-lg: var(--neo-float);
  --shadow-md: var(--neo-soft);

  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-display: clamp(42px, 6.8vw, 88px);
  --t-h1: clamp(36px, 5.4vw, 76px);
  --t-h2: clamp(30px, 4vw, 52px);
  --t-h3: clamp(19px, 1.5vw, 23px);
  --t-body: clamp(15px, 1vw, 17px);
  --t-small: 14px;
  --t-mono: 11px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --max-w: 1280px;
  --gutter: clamp(20px, 5vw, 56px);

  --r-1: 6px;
  --r-2: 12px;
  --r-3: 18px;
  --r-4: 24px;
  --r-5: 32px;
  --r-btn: 14px;
  --r-card: 20px;

  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-power-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-power-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 600ms;
  --d-cinema: 950ms;

  --z-canvas: 0;
  --z-bg-fx: 1;
  --z-overlay: 2;
  --z-section: 3;
  --z-nav: 50;
  --z-modal: 100;
  --z-ui: 200;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --mx: 50%;
  --my: 50%;
}