/* ==========================================================================
   Bluemonster.ai — design tokens
   Kierunek: ciemne, technologiczne tło w tonacji śliwkowego fioletu
   (nie czarny "matrix"), z ciepłym pomarańczem jako akcentem działania
   i turkusem jako kolorem danych/etykiet.
   Baza z onboardingu klienta: #7c3aed, #f97316, #22d3ee.
   ========================================================================== */

:root {
  /* --- tła / powierzchnie (śliwkowy ink, nie neutralny grafit) --- */
  --ink-950: #0c0716;
  --ink-900: #130b24;
  --ink-850: #180e2c;
  --ink-800: #1f1339;
  --ink-750: #261748;
  --ink-700: #2f1d58;
  --ink-600: #3d2670;

  /* --- akcent główny: fiolet --- */
  --violet-700: #5b21b6;
  --violet-600: #6d28d9;
  --violet-500: #7c3aed;
  --violet-400: #9265f7;
  --violet-300: #b797ff;

  /* --- akcent działania: pomarańcz --- */
  --orange-600: #ea6a0c;
  --orange-500: #f97316;
  --orange-400: #fb9245;

  /* --- akcent danych: turkus --- */
  --cyan-500: #06b6d4;
  --cyan-400: #22d3ee;
  --cyan-300: #6ee7f9;

  /* --- tekst --- */
  --cream: #f8f5ff;
  --text: #e2d9f5;
  --text-soft: #c2b5de;
  --text-dim: #a294c2;
  --ink-on-light: #1a1030;

  /* --- obramowania i mgiełki --- */
  --line: rgba(183, 151, 255, 0.16);
  --line-strong: rgba(183, 151, 255, 0.34);
  --surface-card: rgba(37, 22, 68, 0.72);
  --surface-glass: rgba(19, 11, 36, 0.78);
  --scrim-dark: rgba(10, 6, 20, 0.62);

  /* --- gradienty marki --- */
  --grad-brand: linear-gradient(115deg, var(--violet-500) 0%, var(--violet-400) 45%, var(--cyan-400) 120%);
  --grad-cta: linear-gradient(120deg, var(--violet-500) 0%, var(--violet-600) 55%, var(--violet-700) 100%);
  --grad-warm: linear-gradient(120deg, var(--orange-500), var(--orange-600));
  --grad-text: linear-gradient(96deg, var(--cream) 10%, var(--violet-300) 55%, var(--cyan-300) 100%);

  /* --- typografia --- */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero: clamp(2.35rem, 5vw, 4.35rem);
  --fs-h2: clamp(1.95rem, 3.5vw, 3.05rem);
  --fs-h3: clamp(1.2rem, 1.5vw, 1.45rem);
  --fs-stat: clamp(2.6rem, 5vw, 4.1rem);
  --fs-price: clamp(2.2rem, 3.4vw, 3rem);
  --fs-lead: clamp(1.04rem, 1.25vw, 1.26rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-mono: 0.78rem;

  --lh-tight: 1.02;
  --lh-head: 1.12;
  --lh-body: 1.66;
  --tr-tight: -0.028em;
  --tr-mono: 0.14em;

  /* --- rytm (8pt) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --- promienie --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- cienie / poświaty --- */
  --shadow-card: 0 18px 50px rgba(6, 3, 14, 0.5);
  --shadow-lift: 0 28px 70px rgba(6, 3, 14, 0.62);
  --glow-violet: 0 0 0 1px rgba(146, 101, 247, 0.35), 0 22px 60px rgba(109, 40, 217, 0.32);
  --glow-cyan: 0 0 22px rgba(34, 211, 238, 0.35);

  /* --- ruch --- */
  --ease-out: cubic-bezier(0.22, 0.8, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0.14, 0.3, 1);
  --dur-1: 0.18s;
  --dur-2: 0.36s;
  --dur-3: 0.62s;

  /* --- layout --- */
  --container: 1180px;
  --container-narrow: 820px;
  --nav-h: 74px;
  --nav-h-mobile: 64px;
}