/* ==========================================================================
   Irizar ieBus AI – tokeny projektowe (Fluent „Akryl nocą”)
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Paleta */
  --abyss: #0b0f19;          /* tło bazowe */
  --deep: #121827;           /* głębia paneli */
  --glass: rgba(28, 34, 52, 0.55);
  --glass-strong: rgba(20, 25, 40, 0.86);
  --glass-hi: rgba(120, 200, 255, 0.07);
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(120, 170, 255, 0.45);

  --ion: #5aa2ff;            /* błękit Fluent – akcent główny */
  --ion-rgb: 90, 162, 255;
  --nebula: #38d39f;         /* zieleń energii – akcent drugi */
  --nebula-rgb: 56, 211, 159;
  --frost: #dbe8ff;

  --polar: #f3f5fa;          /* tekst główny  – 17:1 na --abyss */
  --mist: #b3bdd0;           /* tekst drugi    – 9:1 */
  --dim: #8f9ab0;            /* tekst pomocniczy – ≥ 5,5:1 na szkle */
  --on-ion: #06142b;         /* tekst na cyjanie – 13:1 */

  --ok: #63f2bf;
  --warn: #ffcf70;
  --danger: #ff8a9a;

  /* Typografia */
  --font-display: 'Segoe UI Variable Display', 'Segoe UI', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-text: 'Segoe UI Variable Text', 'Segoe UI', 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Skala 1.25 – od bazowego rozmiaru, który rośnie z ekranem targowym */
  --step--2: 0.72rem;
  --step--1: 0.84rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: 1.95rem;
  --step-4: 2.6rem;
  --step-5: clamp(2.6rem, 1.4rem + 3.6vw, 5.2rem);
  --giant: clamp(16rem, 38vw, 44rem);

  /* Promienie – hierarchia: skorupa > karta > dymek > kontrolka */
  --r-shell: 16px;
  --r-card: 10px;
  --r-bubble: 12px;
  --r-control: 10px;
  --r-pill: 999px;

  /* Ruch */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 700ms;

  /* Światło i cień */
  --glow-sm: 0 0 0 1px rgba(var(--ion-rgb), 0.28), 0 0 18px rgba(var(--ion-rgb), 0.22);
  --glow-md: 0 0 0 1px rgba(var(--ion-rgb), 0.4), 0 0 28px rgba(var(--ion-rgb), 0.3), 0 0 70px rgba(var(--nebula-rgb), 0.18);
  --shadow-deep: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 12px 32px -12px rgba(0, 10, 40, 0.9);
  --inner-edge: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(160, 215, 255, 0.08);

  --focus-ring: 0 0 0 2px var(--abyss), 0 0 0 4px var(--ion), 0 0 18px 4px rgba(var(--ion-rgb), 0.45);

  --gutter: clamp(16px, 2vw, 40px);
}