/* ============================================
   DGH ETIQUETAS — DESIGN TOKENS
   Concepto: "Industrial Premium" Dark Mode
   ============================================ */

:root {
  /* ── Brand Colors ────────────────────────── */
  --color-brand-primary: #C02424;
  --color-brand-primary-light: #E63946;
  --color-brand-primary-dark: #8B1A1A;
  --color-brand-primary-rgb: 192, 36, 36;
  
  /* ── Dark Backgrounds ────────────────────── */
  --color-bg-primary: #0a0a14;
  --color-bg-secondary: #0f0f1a;
  --color-bg-tertiary: #12121e;
  --color-bg-card: #1a1a2e;
  --color-bg-card-hover: #22223a;
  --color-bg-elevated: #1e1e32;
  
  /* ── Text Colors ─────────────────────────── */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B8B8CC;
  --color-text-muted: #6b6b80;
  --color-text-accent: var(--color-brand-primary-light);
  
  /* ── Glass / Borders ─────────────────────── */
  --color-border-glass: rgba(255, 255, 255, 0.06);
  --color-border-glass-hover: rgba(255, 255, 255, 0.12);
  --color-border-accent: rgba(192, 36, 36, 0.3);
  --color-glass-bg: rgba(255, 255, 255, 0.03);
  --color-glass-bg-hover: rgba(255, 255, 255, 0.06);
  
  /* ── Gradients ───────────────────────────── */
  --gradient-cta: linear-gradient(135deg, #C02424, #E63946);
  --gradient-cta-hover: linear-gradient(135deg, #E63946, #ff4757);
  --gradient-hero-overlay: linear-gradient(180deg, rgba(10,10,20,0.85) 0%, rgba(10,10,20,0.4) 50%, rgba(10,10,20,0.9) 100%);
  --gradient-section-fade: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  --gradient-card-glow: radial-gradient(ellipse at center, rgba(192,36,36,0.08) 0%, transparent 70%);
  --gradient-text: linear-gradient(135deg, #FFFFFF 0%, #B8B8CC 100%);
  --gradient-red-text: linear-gradient(135deg, #E63946 0%, #C02424 100%);
  
  /* ── Typography ──────────────────────────── */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  
  --fs-hero: clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1: clamp(2rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.75rem);
  --fs-h4: clamp(1rem, 1.5vw, 1.25rem);
  --fs-body: clamp(0.95rem, 1.2vw, 1.125rem);
  --fs-small: clamp(0.8rem, 1vw, 0.875rem);
  --fs-label: 0.75rem;
  --fs-stat: clamp(2.5rem, 5vw, 4.5rem);
  
  --lh-heading: 1.15;
  --lh-body: 1.7;
  --ls-heading: -0.02em;
  --ls-label: 0.15em;
  
  /* ── Spacing ─────────────────────────────── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  
  --section-padding: clamp(4rem, 8vw, 8rem);
  --container-width: 1280px;
  --container-padding: clamp(1rem, 3vw, 2rem);
  
  /* ── Border Radius ───────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* ── Shadows ─────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 30px rgba(192, 36, 36, 0.2);
  --shadow-glow-strong: 0 0 60px rgba(192, 36, 36, 0.3);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--color-border-glass);
  
  /* ── Transitions ─────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 600ms cubic-bezier(0.23, 1, 0.32, 1);
  
  /* ── Z-Index Scale ───────────────────────── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-top: 999;
  
  /* ── Breakpoints (for reference) ─────────── */
  /* Mobile: 0-767px */
  /* Tablet: 768-1023px */
  /* Desktop: 1024px+ */
  /* Wide: 1440px+ */
}