/* ============================================
   Design Tokens — Single Source of Truth
   ============================================
   Palette: Deep navy/charcoal + silver/chrome + Moto Guzzi red
   Inspired by motorcycle chrome, workshop steel, Italian racing
   ============================================ */

:root {
  /* === COLOR PALETTE === */
  /* Navy / Charcoal — primary dark tones */
  --color-navy-950: #0D1117;
  --color-navy-900: #1B2B3A;
  --color-navy-800: #243447;
  --color-navy-700: #2D4258;
  --color-navy-600: #3D5A80;
  --color-navy-500: #4A6FA5;

  /* Silver / Chrome — light & metallic tones */
  --color-silver-400: #8899AA;
  --color-silver-300: #A8B8C8;
  --color-silver-200: #C8D4DE;
  --color-silver-100: #E4ECF0;
  --color-silver-50:  #F2F5F7;

  /* Red — Moto Guzzi accent */
  --color-red-700:   #8B1A1A;
  --color-red-600:   #C23030;
  --color-red-500:   #E04040;
  --color-red-400:   #E86C6C;
  --color-red-100:   #FDE8E8;

  /* Gold — for stars/ratings */
  --color-gold-500:  #D4A843;
  --color-gold-400:  #E0BE6E;

  /* Neutrals */
  --color-white:     #FFFFFF;
  --color-black:     #0D1117;

  /* Semantic */
  --color-bg-primary:    var(--color-silver-50);
  --color-bg-secondary:  var(--color-silver-100);
  --color-bg-dark:       var(--color-navy-900);
  --color-bg-card:       var(--color-white);

  --color-text-primary:  var(--color-navy-900);
  --color-text-secondary: var(--color-navy-600);
  --color-text-on-dark:  var(--color-silver-50);
  --color-text-muted:    var(--color-silver-400);
  --color-text-accent:   var(--color-red-600);

  --color-accent:        var(--color-red-600);
  --color-accent-hover:  var(--color-red-700);

  --color-border:        var(--color-silver-200);
  --color-border-light:  var(--color-silver-100);

  --color-star:          var(--color-gold-500);

  /* === TYPOGRAPHY === */
  --font-heading: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Segoe UI', 'Helvetica Neue', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  --weight-light:    300;
  --weight-normal:   400;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* === SPACING === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* === LAYOUT === */
  --container-max:    1200px;
  --container-narrow: 800px;
  --container-wide:   1400px;
  --header-height:    80px;

  /* === BORDERS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 50%;

  /* === SHADOWS === */
  --shadow-sm:  0 1px 3px rgba(13, 17, 23, 0.06);
  --shadow-md:  0 4px 12px rgba(13, 17, 23, 0.10);
  --shadow-lg:  0 8px 30px rgba(13, 17, 23, 0.14);
  --shadow-xl:  0 16px 48px rgba(13, 17, 23, 0.18);

  /* === TRANSITIONS === */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;

  /* === Z-INDEX === */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   100;
  --z-overlay:  1000;
  --z-modal:    1100;
}