/* ================================================
   ALCOTRADE - DESIGN TOKENS (FINAL v6)
   Editorial layout + modern high-contrast
   Off-white + true black + electric cobalt + acid lime
   ================================================ */

:root {
  /* ---- Base surfaces ---- */
  --c-bg:           #f5f5f7;          /* slight cool off-white */
  --c-bg-elev-1:    #ffffff;          /* card surface */
  --c-bg-elev-2:    #ebebed;          /* elevated alt */
  --c-bg-section:   #f0f0f2;          /* alternating section */
  --c-bg-deep:      #050505;          /* pure black for inverted blocks */
  --c-bg-glass:     rgba(245, 245, 247, 0.82);

  /* ---- Borders ---- */
  --c-border:       #d4d4d8;
  --c-border-hi:    #a1a1aa;
  --c-border-soft:  #e4e4e7;

  /* ---- Ink (true black, max contrast) ---- */
  --c-ink:          #0a0a0a;
  --c-text:         #18181b;
  --c-text-muted:   #52525b;
  --c-text-dim:     #71717a;

  /* ---- Accents ---- */
  --c-accent:       #2546ff;          /* electric cobalt - primary */
  --c-accent-soft:  #4f6dff;
  --c-accent-deep:  #1e3aff;
  --c-accent-bg:    #e8edff;          /* cobalt tint for badges */
  --c-energy:       #d4ff3d;          /* acid lime - highlight glow */
  --c-energy-soft:  #ecffa3;
  --c-rose:         #ff4d6d;          /* hot rose - reserve */

  --c-text-on-ink:  #f5f5f7;
  --c-text-on-accent: #ffffff;

  /* Status (subtle) */
  --c-success:      #16a34a;
  --c-warning:      #d97706;
  --c-danger:       #dc2626;

  /* ---- Gradients ---- */
  --grad-paper:     linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
  --grad-hero:      radial-gradient(circle at 30% 20%, rgba(37, 70, 255, 0.10) 0%, transparent 55%),
                    radial-gradient(circle at 80% 70%, rgba(212, 255, 61, 0.08) 0%, transparent 50%),
                    linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
  --grad-cta:       linear-gradient(180deg, #2546ff 0%, #1e3aff 100%);
  --grad-energy:    linear-gradient(135deg, #d4ff3d 0%, #2546ff 100%);
  --grad-line:      linear-gradient(90deg, transparent 0%, rgba(37, 70, 255, 0.4) 50%, transparent 100%);
  --grad-inverted:  radial-gradient(ellipse at 80% 20%, rgba(37, 70, 255, 0.25) 0%, transparent 55%),
                    radial-gradient(ellipse at 20% 80%, rgba(212, 255, 61, 0.18) 0%, transparent 55%);

  /* ---- Typography ---- */
  --font-serif:     'Fraunces', 'Tiempos', Georgia, serif;     /* display nagłówki */
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* font sizes (responsive clamp) */
  --fs-display:     clamp(2.75rem, 7vw, 6.5rem);
  --fs-h1:          clamp(2rem, 4.5vw, 3.75rem);
  --fs-h2:          clamp(1.625rem, 3vw, 2.5rem);
  --fs-h3:          clamp(1.125rem, 1.75vw, 1.5rem);
  --fs-body:        1.0625rem;
  --fs-lede:        clamp(1.0625rem, 1.25vw, 1.25rem);
  --fs-small:       0.875rem;
  --fs-tiny:        0.75rem;

  --lh-display:     1.0;
  --lh-tight:       1.15;
  --lh-body:        1.6;

  --ls-tight:       -0.025em;
  --ls-tighter:     -0.04em;
  --ls-normal:      0;
  --ls-wide:        0.04em;
  --ls-eyebrow:     0.18em;

  /* ---- Spacing scale ---- */
  --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; --s-11: 160px;

  /* ---- Radii ---- */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px;

  /* ---- Shadows ---- */
  --sh-sm:   0 1px 2px rgba(10, 10, 10, 0.04);
  --sh-md:   0 1px 3px rgba(10, 10, 10, 0.06), 0 4px 12px rgba(10, 10, 10, 0.04);
  --sh-lg:   0 4px 6px rgba(10, 10, 10, 0.04), 0 12px 32px rgba(10, 10, 10, 0.08);
  --sh-xl:   0 24px 56px rgba(10, 10, 10, 0.10);
  --sh-glow: 0 0 0 1px rgba(37, 70, 255, 0.2), 0 4px 16px rgba(37, 70, 255, 0.22);
  --sh-glow-energy: 0 0 0 1px rgba(212, 255, 61, 0.4), 0 0 24px rgba(212, 255, 61, 0.3);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bezier: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.2s; --t-base: 0.4s; --t-slow: 0.7s;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);
  --container-narrow: 880px;
  --nav-h: 72px;

  /* ---- Z ---- */
  --z-nav: 50; --z-modal: 100; --z-toast: 150;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms; --t-base: 0.01ms; --t-slow: 0.01ms;
  }
}