/* ═══════════════════════════════════════════
   DITEV — Design Tokens / Variables
   Paleta corporativa inspirada en Orbinox
   ═══════════════════════════════════════════ */

:root {
  /* ─── Brand ─── */
  --navy:          #003366;
  --navy-dark:     #002244;
  --navy-medium:   #00408c;
  --navy-light:    #0055bb;
  --red:           #cc0000;
  --red-bright:    #e60000;
  --red-dim:       rgba(204, 0, 0, 0.10);
  --red-glow:      rgba(204, 0, 0, 0.20);

  /* ─── Neutrals ─── */
  --white:         #ffffff;
  --grey-50:       #f8fafc;
  --grey-100:      #f1f5f9;
  --grey-200:      #e2e8f0;
  --grey-300:      #cbd5e1;
  --grey-400:      #94a3b8;
  --grey-500:      #64748b;
  --grey-600:      #475569;
  --grey-700:      #334155;
  --grey-800:      #1e293b;
  --grey-900:      #0f172a;

  /* ─── Typography ─── */
  --font-display:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:     'Inter', 'IBM Plex Sans', sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  /* ─── Layout ─── */
  --nav-height:    76px;
  --max-width:     1280px;
  --section-pad:   5rem;
  --gutter:        2rem;

  /* ─── Shadows ─── */
  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg:     0 8px 40px rgba(0, 0, 0, 0.14);
  --shadow-navy:   0 4px 20px rgba(0, 51, 102, 0.25);

  /* ─── Radius ─── */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;

  /* ─── Transitions ─── */
  --ease:          0.22s ease;
  --ease-slow:     0.4s ease;
}