/* ============================================
   CARRIROAD DESIGN TOKENS — Kinetic Precision
   Brand Identity: Dark + Neon · Logística 5.0
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  /* === BRAND CORE (Kinetic Precision) === */
  --cr-lime:          #A1FB00;
  --cr-lime-hover:    #B8FF3D;
  --cr-lime-tint:     #8DDC00;
  --cr-on-primary:    #203700;
  --cr-white:         #FFFFFF;

  /* === SURFACE HIERARCHY (Tonal Layering) === */
  --cr-surface:       #131313;
  --cr-surface-low:   #1C1B1B;
  --cr-surface-mid:   #1E1E1E;
  --cr-surface-high:  #2A2A2A;
  --cr-surface-dim:   #0E0E0E;
  --cr-surface-v:     #353534;

  /* === TEXT HIERARCHY === */
  --cr-text-primary:  #F1F5F9;
  --cr-on-surface:    #C0CAAD;
  --cr-text-muted:    #64748B;
  --cr-outline:       #414A34;

  /* === STATUS COLORS === */
  --cr-status-blue:   #3B82F6;
  --cr-status-red:    #EF4444;
  --cr-status-success:#A1FB00;
  --cr-status-mute:   #9CA3AF;

  /* === GLOW EFFECTS === */
  --cr-lime-glow:     rgba(161, 251, 0, 0.15);
  --cr-lime-glow-strong: rgba(161, 251, 0, 0.30);
  --cr-lime-glow-soft: rgba(141, 220, 0, 0.10);
  --cr-neon-pulse:    rgba(161, 251, 0, 0.25);

  /* === GRADIENTS === */
  --cr-gradient-hero:    linear-gradient(135deg, #131313 0%, #1E1E1E 40%, #0E1A00 100%);
  --cr-gradient-neon:    linear-gradient(135deg, #A1FB00, #8DDC00);
  --cr-gradient-neon-h:  linear-gradient(90deg, #A1FB00, #8DDC00, #A1FB00);
  --cr-gradient-dark:    linear-gradient(180deg, #131313 0%, #1E1E1E 100%);
  --cr-gradient-section: linear-gradient(180deg, #1E1E1E 0%, #131313 100%);
  --cr-gradient-glass:   linear-gradient(135deg, rgba(30,30,30,0.8), rgba(19,19,19,0.6));
  --cr-gradient-card:    linear-gradient(145deg, #1E1E1E 0%, #131313 100%);

  /* === GLASSMORPHISM === */
  --cr-glass-bg:      rgba(26, 26, 26, 0.6);
  --cr-glass-border:  rgba(255, 255, 255, 0.05);
  --cr-glass-blur:    blur(12px);

  /* === TYPOGRAPHY (Archivo + Satoshi — Manual de Marca) === */
  --font-heading:     'Archivo', 'Inter', sans-serif;
  --font-body:        'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display:       clamp(2.8rem, 5vw, 4.5rem);
  --fs-h1:            clamp(2.2rem, 4vw, 3.5rem);
  --fs-h2:            clamp(1.8rem, 3vw, 2.5rem);
  --fs-h3:            clamp(1.3rem, 2vw, 1.75rem);
  --fs-h4:            clamp(1.1rem, 1.5vw, 1.25rem);
  --fs-body:          1rem;
  --fs-body-lg:       1.125rem;
  --fs-small:         0.875rem;
  --fs-xs:            0.75rem;

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

  --lh-tight:         1.1;
  --lh-snug:          1.3;
  --lh-normal:        1.6;
  --lh-relaxed:       1.8;

  /* === SPACING (8px system) === */
  --space-2xs:        2px;
  --space-xs:         4px;
  --space-sm:         8px;
  --space-md:         16px;
  --space-lg:         24px;
  --space-xl:         32px;
  --space-2xl:        48px;
  --space-3xl:        64px;
  --space-4xl:        96px;
  --space-5xl:        128px;

  /* === BORDERS (Ghost Border philosophy) === */
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        17px;
  --radius-xl:        24px;
  --radius-2xl:       32px;
  --radius-full:      9999px;

  --border-ghost:     1px solid rgba(65, 74, 52, 0.15);
  --border-subtle:    1px solid rgba(161, 251, 0, 0.08);
  --border-glow:      1px solid rgba(161, 251, 0, 0.2);
  --border-strong:    1px solid rgba(161, 251, 0, 0.4);

  /* === 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-ambient:   0 10px 60px rgba(0,0,0,0.06);
  --shadow-neon:      0 0 20px rgba(161, 251, 0, 0.15), 0 0 60px rgba(161, 251, 0, 0.05);
  --shadow-neon-strong: 0 0 30px rgba(161, 251, 0, 0.25), 0 0 80px rgba(161, 251, 0, 0.1);

  /* === TRANSITIONS === */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;

  /* === LAYOUT === */
  --container-max:    1200px;
  --container-wide:   1400px;
  --nav-height:       72px;
}