/* ============================================================
   VARIABLES.CSS — Design Tokens
   ============================================================ */

:root {
  /* ── Colors ── */
  --clr-bg-primary:    #0a0d14;
  --clr-bg-secondary:  #0f1420;
  --clr-bg-card:       #141927;
  --clr-bg-card-hover: #1a2035;
  --clr-bg-input:      #1a2035;
  --clr-border:        #1e2a42;
  --clr-border-hover:  #2e3f5c;

  /* Text */
  --clr-text-primary:  #f1f5f9;
  --clr-text-secondary:#94a3b8;
  --clr-text-muted:    #475569;
  --clr-text-inverse:  #0a0d14;

  /* Accents */
  --clr-blue:          #3b82f6;
  --clr-blue-light:    #60a5fa;
  --clr-blue-dark:     #1d4ed8;
  --clr-cyan:          #06b6d4;
  --clr-cyan-light:    #22d3ee;
  --clr-gold:          #f59e0b;
  --clr-gold-light:    #fbbf24;
  --clr-red:           #ef4444;
  --clr-red-light:     #f87171;
  --clr-purple:        #8b5cf6;
  --clr-purple-light:  #a78bfa;
  --clr-green:         #22c55e;
  --clr-green-light:   #4ade80;

  /* Badge variants */
  --badge-banking:     var(--clr-gold);
  --badge-cloud:       var(--clr-blue);
  --badge-security:    var(--clr-red);
  --badge-network:     var(--clr-purple);
  --badge-soc:         var(--clr-cyan);
  --badge-ha:          var(--clr-green);

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

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.25rem;    /* 20px */
  --fs-2xl:  1.5rem;     /* 24px */
  --fs-3xl:  1.875rem;   /* 30px */
  --fs-4xl:  2.25rem;    /* 36px */
  --fs-5xl:  3rem;       /* 48px */
  --fs-6xl:  3.75rem;    /* 60px */

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

  --lh-tight:  1.2;
  --lh-snug:   1.375;
  --lh-normal: 1.5;
  --lh-relaxed:1.625;
  --lh-loose:  2;

  --ls-tight:  -0.025em;
  --ls-normal:  0;
  --ls-wide:    0.025em;
  --ls-wider:   0.05em;
  --ls-widest:  0.1em;

  /* ── 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;
  --sp-32: 8rem;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:  0 10px 25px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.4);
  --shadow-xl:  0 20px 40px rgba(0,0,0,0.7), 0 8px 20px rgba(0,0,0,0.4);
  --shadow-glow-blue:   0 0 20px rgba(59,130,246,0.3);
  --shadow-glow-cyan:   0 0 20px rgba(6,182,212,0.3);
  --shadow-glow-gold:   0 0 20px rgba(245,158,11,0.3);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --nav-height:    64px;
  --container-max: 1100px;
  --section-py:    var(--sp-24);

  /* ── Z-index ── */
  --z-base:    1;
  --z-overlay: 10;
  --z-modal:   100;
  --z-nav:     1000;
  --z-toast:   9999;
}