/* =========================================================================
   Design Tokens — Kopalnie Krypto demo v2
   SSOT palety, typografii, layout. Bazowane na DESIGN.md v1.0 + 6 layout tokenow
   dodanych na rekomendacje UX Leada (2026-04-21).
   Zmiana tu = zmiana wszedzie. Zadnych hardkodowanych kolorow w innych plikach.
   ========================================================================= */
:root {
  /* --- Tla (5) --- */
  --bg-base:      #0a0a0f;
  --bg-surface:   #11111a;
  --bg-elevated:  #1a1a26;
  --bg-glass:     rgba(255,255,255,0.06);
  --bg-border:    rgba(255,255,255,0.12);

  /* --- Akcenty (8) --- */
  --accent-primary: #a855f7;  /* KK fiolet */
  --color-brand:    var(--accent-primary); /* alias semantyczny — preferowany w nowym kodzie */
  --accent-hover:   #9333ea;
  --accent-soft:    #d8b4fe;  /* delikatny fiolet do tekstu na tle glass */
  --accent-green:   #34d399;  /* online / pokryte energia (mint, jak w realnym panelu) */
  --accent-cyan:    #38bdf8;  /* link / explorer / metrics wyroznione */
  --accent-amber:   #f59e0b;  /* koszt z sieci / ostrzezenie */
  --accent-rose:    #fb7185;  /* offline / blad */
  --accent-btc:     #f7931a;
  --color-milestone:#e8d44d;  /* citrine gold — okno wyjscia / kamienie milowe (DESIGN.md v1.0, 2026-04-25) */

  /* --- Tekst (4) --- */
  --text-primary:   #ffffff;
  --text-secondary: #e4e4e7;   /* zinc-200 — body */
  --text-tertiary:  #a1a1aa;   /* zinc-400 — disclaimery, help */
  --text-muted:     #71717a;   /* zinc-500 — tylko gdy kontekst rzeczywiscie drugorzedny */

  /* --- Typografia --- */
  --font-sans: 'Mulish', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  36px;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* --- Spacing (4 steps) --- */
  --space-tight:   8px;
  --space-inner:  16px;
  --space-section:32px;
  --space-gutter: 48px;

  /* --- Radii --- */
  --radius-inner: 8px;
  --radius-card:  14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-pill:  9999px;

  /* --- Shadows --- */
  --shadow-card:  0 10px 30px rgba(0,0,0,0.35);
  --shadow-xl:    0 24px 80px rgba(5,7,13,0.42);
  --shadow-pop:   0 4px 12px rgba(168,85,247,0.25);

  /* --- Hero background (Codex — deep navy + radial gradients) --- */
  --bg-hero: radial-gradient(circle at 14% 10%, rgba(168,85,247,0.18), transparent 24%),
             radial-gradient(circle at 84% 18%, rgba(56,189,248,0.14), transparent 20%),
             radial-gradient(circle at 50% 100%, rgba(52,211,153,0.08), transparent 26%),
             linear-gradient(180deg, #05070d 0%, #07101f 38%, #05070d 100%);

  /* --- Eyebrow label (uppercase maly nadgorny tekst) --- */
  --eyebrow-ls: 0.14em;
  --eyebrow-fs: 11px;

  /* --- Layout (panel) --- */
  --layout-max-width:        1200px;
  --layout-panel-main:       1fr;
  --layout-panel-sidebar:    320px;
  --layout-header-height:    56px;

  /* --- Motion --- */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-micro:  120ms;
  --duration-fade:   180ms;
  --duration-route:  240ms;
}