/* ============================================================
   ADRIANAUTO — Design System Variables — RED CHROME EDITION
   ============================================================ */

:root {
  /* ── Brand: Chromatic Red as accent, white/light as base */
  --red-50:    #fff1f2;
  --red-100:   #ffe4e6;
  --red-200:   #fecdd3;
  --red-300:   #fda4af;
  --red-400:   #fb7185;
  --red-500:   #f43f5e;
  --red-600:   #e11d48;
  --red-700:   #be123c;
  --red-800:   #9f1239;
  --red-900:   #881337;

  /* Chrome red — metallic, vivid */
  --chrome-red:        #e8142a;
  --chrome-red-light:  #ff2d47;
  --chrome-red-dark:   #c0102a;
  --chrome-red-glow:   rgba(232,20,42,.30);

  /* ── Dark base — Deep Crimson/Bordeaux Cinematic */
  --navy:      #120508;
  --navy-mid:  #1a0608;
  --navy-soft: #260a0d;
  --navy-card: #1c0709;

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

  /* ── Semantic */
  --text:        var(--gray-900);
  --text-soft:   var(--gray-600);
  --text-muted:  var(--gray-400);
  --border:      var(--gray-200);
  --border-soft: var(--gray-100);
  --surface:     var(--white);
  --surface-alt: var(--gray-50);
  --green:  #16a34a;
  --red:    #dc2626;
  --orange: #ea580c;

  /* ── Primary accent = CHROME RED */
  --primary:       var(--chrome-red);
  --primary-hover: var(--chrome-red-dark);
  --primary-light: var(--red-50);
  --primary-glow:  var(--chrome-red-glow);

  /* Map old gold vars to red so existing code works */
  --gold-50:   var(--red-50);
  --gold-100:  var(--red-100);
  --gold-200:  var(--red-200);
  --gold-300:  var(--red-300);
  --gold-400:  var(--chrome-red-light);
  --gold-500:  var(--chrome-red);
  --gold-600:  var(--chrome-red-dark);
  --gold-700:  var(--red-700);
  --gold-800:  var(--red-800);
  --gold:      var(--chrome-red);
  --gold-mid:  var(--chrome-red-dark);
  --gold-light: var(--chrome-red-light);
  --gold-glow:  var(--chrome-red);
  --gold-bright: #ff1a33;
  --shadow-gold: 0 8px 28px rgba(232,20,42,.28);

  /* ── Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing */
  --nav-h:     72px;
  --max-w:     1280px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ── Shadows */
  --shadow-xs:   0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:      0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --shadow-md:   0 8px 24px rgba(0,0,0,.09), 0 3px 8px rgba(0,0,0,.05);
  --shadow-lg:   0 16px 40px rgba(0,0,0,.10), 0 6px 14px rgba(0,0,0,.06);
  --shadow-xl:   0 28px 64px rgba(0,0,0,.12), 0 10px 24px rgba(0,0,0,.07);

  /* ── Transitions */
  --t-fast: .12s ease;
  --t-base: .2s ease;
  --t-slow: .35s cubic-bezier(.22,1,.36,1);
}