/* ==========================================================================
   Blue Nova Cyber — Design Tokens
   Forest Dark Carbon — Negro #0A0A0A + Emerald 700 #047857
   ========================================================================== */

:root {
	/* === BACKGROUNDS — Negro carbón puro === */
	--bg-deep:        #0A0A0A;   /* body principal */
	--bg-elevated:    #141414;   /* cards, sections */
	--bg-subtle:      #1F1F1F;   /* hovers, dividers */
	--bg-overlay:     rgba(10, 10, 10, 0.85);
	--bg-glass:       rgba(20, 20, 20, 0.55);
	--bg-footer:      #050505;

	/* === BRAND EMERALD — Forest Dark === */
	--em-950:         #022C22;   /* deep especiales */
	--em-900:         #064E3B;   /* profundidad */
	--em-800:         #065F46;
	--em-700:         #047857;   /* PRIMARY ⭐ */
	--em-600:         #059669;
	--em-500:         #10B981;   /* hover, links activos */
	--em-400:         #34D399;   /* accent, eyebrow */
	--em-300:         #6EE7B7;   /* highlights */
	--em-200:         #A7F3D0;   /* mint pastel */

	/* === TEXTO === */
	--text:           #F1F5F9;
	--text-2:         #CBD5E1;
	--text-muted:     #94A3B8;
	--text-dim:       #64748B;
	--text-on-em:     #FFFFFF;

	/* === BORDERS === */
	--border:         rgba(148, 163, 184, 0.10);
	--border-strong:  rgba(148, 163, 184, 0.22);
	--border-em:      rgba(4, 120, 87, 0.50);
	--border-mint:    rgba(52, 211, 153, 0.40);

	/* === ESTADOS === */
	--state-alert:    #FF6B6B;
	--state-warn:     #FFB020;
	--state-info:     #3B82F6;

	/* === GRADIENTS === */
	--grad-em:        linear-gradient(135deg, #047857 0%, #10B981 100%);
	--grad-em-mint:   linear-gradient(135deg, #10B981 0%, #34D399 100%);
	--grad-deep:      linear-gradient(135deg, #064E3B 0%, #0A0A0A 60%, #047857 100%);
	--grad-fade-top:  linear-gradient(180deg, rgba(10,10,10,0) 0%, var(--bg-deep) 100%);

	/* === GLOW === */
	--glow-em:        0 0 24px rgba(4, 120, 87, 0.55);
	--glow-em-lg:     0 0 48px rgba(4, 120, 87, 0.70);
	--glow-mint:      0 0 18px rgba(52, 211, 153, 0.55);

	/* === SHADOWS === */
	--shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.30);
	--shadow:         0 8px 24px rgba(0, 0, 0, 0.40);
	--shadow-lg:      0 16px 48px rgba(0, 0, 0, 0.50);
	--shadow-card:    0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255,255,255,0.04) inset;

	/* === TIPOGRAFÍA === */
	--font-body:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--font-numbers:   'Sora', 'Plus Jakarta Sans', sans-serif;
	--font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

	--fs-xs:          0.75rem;
	--fs-sm:          0.875rem;
	--fs-base:        1rem;
	--fs-md:          1.125rem;
	--fs-lg:          1.25rem;
	--fs-xl:          1.5rem;
	--fs-2xl:         2rem;
	--fs-3xl:         2.5rem;
	--fs-4xl:         3.25rem;
	--fs-5xl:         4.25rem;

	--lh-tight:       1.15;
	--lh-snug:        1.35;
	--lh-normal:      1.6;
	--lh-relaxed:     1.75;

	/* === SPACING (8pt) === */
	--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 === */
	--container-max:  1280px;
	--container-pad:  clamp(1rem, 4vw, 2.5rem);
	--radius-sm:      4px;
	--radius:         8px;
	--radius-md:      12px;
	--radius-lg:      20px;
	--radius-xl:      32px;
	--radius-pill:    9999px;

	/* === MOTION === */
	--ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast:       120ms;
	--dur:            220ms;
	--dur-slow:       420ms;

	/* === Z-INDEX === */
	--z-base:     1;
	--z-elevated: 10;
	--z-sticky:   50;
	--z-header:   100;
	--z-dropdown: 200;
	--z-drawer:   400;
	--z-modal:    500;
	--z-toast:    700;
}