/* ============================================
   BLACK TRANSPORTE EJECUTIVO
   Design System Variables
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&family=Playfair+Display:ital,wght@1,400;1,600&display=swap');

:root {
  /* ── Brand Colors ── */
  --color-black:        #0a0a0a;
  --color-navy:         #0f1e35;
  --color-navy-light:   #1a2e4a;
  --color-navy-mid:     #1e3a5f;
  --color-gold:         #c9940a;
  --color-gold-light:   #e8ab1a;
  --color-gold-bright:  #f5c842;
  --color-white:        #ffffff;
  --color-offwhite:     #f8f7f4;
  --color-gray-100:     #f1f0ed;
  --color-gray-200:     #e2e0db;
  --color-gray-400:     #9e9b94;
  --color-gray-600:     #5c5a55;
  --color-green-link:   #28a745;

  /* ── Typography ── */
  --font-display:  'Bebas Neue', sans-serif;
  --font-body:     'Montserrat', sans-serif;
  --font-italic:   'Playfair Display', serif;

  /* ── Spacing ── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

  /* ── Borders ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.18);
  --shadow-gold: 0 4px 20px rgba(201,148,10,0.3);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms ease;

  /* ── Layout ── */
  --container-max:  1280px;
  --header-height:  80px;
  --topbar-height:  44px;
}