/* ============================================================
   DESIGN TOKENS — Content Craft Landing
   ============================================================ */

:root {
  /* --- Kolory --- */
  --bg:           #FAFAF7;
  --bg-dark:      #0F0F1E;
  --bg-card:      #FFFFFF;
  --bg-card-dark: #1A1A2E;
  --ink:          #0A0A0A;
  --ink-muted:    #6B7280;
  --ink-faint:    #9CA3AF;
  --violet:       #7C3AED;
  --violet-light: #A78BFA;
  --violet-dark:  #5B21B6;
  --lime:         #D4FF3E;
  --lime-dark:    #A3CC00;
  --white:        #FFFFFF;
  --border:       #E8E8E3;
  --border-dark:  rgba(255,255,255,0.08);

  /* --- Nowe akcenty --- */
  --pink:         #EC4899;
  --pink-light:   #F9A8D4;
  --pink-dark:    #BE185D;
  --cyan:         #06B6D4;
  --cyan-light:   #67E8F9;
  --cyan-dark:    #0E7490;
  --orange:       #FB923C;
  --orange-light: #FDBA74;
  --orange-dark:  #C2410C;

  /* --- Gradienty --- */
  --gradient-hero:    linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #06B6D4 100%);
  --gradient-violet:  linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
  --gradient-pink:    linear-gradient(135deg, #EC4899 0%, #BE185D 100%);
  --gradient-cyan:    linear-gradient(135deg, #06B6D4 0%, #0E7490 100%);
  --gradient-lime:    linear-gradient(135deg, #D4FF3E 0%, #9FBE0B 100%);
  --gradient-orange:  linear-gradient(135deg, #FB923C 0%, #C2410C 100%);

  /* Grain overlay */
  --grain-opacity: 0.025;

  /* --- Typografia --- */
  --font-display: 'Clash Display', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-hero: clamp(3rem, 8vw, 7rem);

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --tracking-tight: -0.04em;
  --tracking-normal: 0em;
  --tracking-wide:  0.05em;
  --tracking-wider: 0.1em;

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout --- */
  --max-w:       1200px;
  --max-w-text:  680px;
  --max-w-wide:  1400px;
  --page-px:     clamp(1rem, 5vw, 3rem);

  /* --- Kształty --- */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full:9999px;

  /* --- Cienie --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:     0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-md:  0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08);
  --shadow-violet: 0 8px 32px rgba(124,58,237,.25);
  --shadow-lime:   0 8px 32px rgba(212,255,62,.35);
  --shadow-pink:   0 8px 32px rgba(236,72,153,.30);
  --shadow-cyan:   0 8px 32px rgba(6,182,212,.30);

  /* --- Animacje --- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration:      250ms;
  --duration-slow: 400ms;

  /* --- Nav --- */
  --nav-h: 64px;
}

/* Tryb ciemny (sekcje z ciemnym tłem) */
.ccp-dark,
.ccp-terminal-cta,
.ccp-night {
  --bg-card:   var(--bg-card-dark);
  --ink:       #F0F0EC;
  --ink-muted: #9CA3AF;
  --border:    var(--border-dark);
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }
}