/* =========================================================
   KeyZip.pro — Design Tokens
   Dark theme CSS custom properties
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Colors ── */
  --clr-bg:          #0b0e1a;
  --clr-bg-2:        #10142a;
  --clr-bg-3:        #161b35;
  --clr-surface:     #1a1f3a;
  --clr-surface-2:   #20264a;
  --clr-border:      rgba(255,255,255,.08);
  --clr-border-2:    rgba(255,255,255,.14);

  --clr-primary:     #7c6aff;
  --clr-primary-d:   #6554e0;
  --clr-primary-l:   #9e8fff;
  --clr-primary-rgb: 124, 106, 255;

  --clr-green:       #22c55e;
  --clr-green-d:     #16a34a;
  --clr-green-l:     #4ade80;
  --clr-green-rgb:   34, 197, 94;

  --clr-gold:        #f59e0b;
  --clr-red:         #ef4444;
  --clr-cyan:        #06b6d4;

  --clr-text:        #e2e8f0;
  --clr-text-2:      #94a3b8;
  --clr-text-3:      #64748b;
  --clr-heading:     #f8fafc;

  /* ── Typography ── */
  --font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;

  --fw-light:    300;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --lh-tight:    1.25;
  --lh-snug:     1.375;
  --lh-normal:   1.5;
  --lh-relaxed:  1.625;

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

  /* ── Radii ── */
  --radius-sm:  0.375rem;
  --radius:     0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-full:9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow:      0 4px 12px rgba(0,0,0,.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,.5);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.6);
  --shadow-glow: 0 0 20px rgba(var(--clr-primary-rgb),.25);
  --shadow-green:0 0 20px rgba(var(--clr-green-rgb),.25);

  /* ── Z-index ── */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-catbar:  90;
  --z-modal:   200;
  --z-toast:   300;
  --z-tooltip: 400;

  /* ── Transitions ── */
  --ease:       cubic-bezier(.4,0,.2,1);
  --ease-out:   cubic-bezier(0,0,.2,1);
  --ease-in:    cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   350ms;
}