/* =============================================================
   VROOM'EAT — Theme: Food Truck des Copains
   Racing-inspired dark theme 🏁
   ============================================================= */

/* ─── Light Theme (default) ─── */
:root {
  /* Primary — Deep Black (Racing) */
  --color-primary: hsl(0, 0%, 5%);
  --color-primary-hover: hsl(0, 0%, 15%);
  --color-primary-rgb: 13, 13, 13;
  --color-on-primary: #ffffff;

  /* Neutrals — Beige chaud + Noir + Blanc (palette du camion) */
  --color-bg: #faf3e2;
  --color-bg-rgb: 250, 243, 226;
  --color-surface: #ffffff;
  --color-surface-rgb: 255, 255, 255;
  --color-border: #000000;
  --color-input-bg: #ffffff;

  /* Beige signature du logo */
  --color-beige: #e8d5a8;
  --color-beige-dark: #d4b87a;

  /* Text */
  --color-text: #000000;
  --color-text-heading: #000000;
  --color-text-muted: #555555;

  /* Semantic colors */
  --color-success: hsl(152, 60%, 40%);
  --color-success-rgb: 41, 163, 107;
  --color-warning: hsl(40, 95%, 50%);
  --color-warning-rgb: 247, 181, 6;
  --color-danger: hsl(0, 72%, 50%);
  --color-danger-hover: hsl(0, 72%, 42%);
  --color-danger-rgb: 219, 35, 35;
  --color-info: hsl(210, 80%, 55%);
  --color-info-rgb: 37, 117, 219;

  /* Accent — Beige chaud du logo */
  --color-accent: #e8d5a8;
  --color-accent-rgb: 232, 213, 168;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #000000, #333333);
  --gradient-dark: linear-gradient(135deg, #000000, #222222);
  --gradient-hero: linear-gradient(
    135deg,
    #fdfcf5 0%,
    #f5f0e1 100%
  );
}

/* ─── Dark Theme (Optional, but let's keep it compatible) ─── */
[data-theme="dark"] {
  --color-bg: #0b0b0b;
  --color-bg-rgb: 11, 11, 11;
  --color-surface: #1a1a1a;
  --color-surface-rgb: 26, 26, 26;
  --color-border: #333333;
  --color-input-bg: #222222;

  --color-text: #fdfcf5;
  --color-text-heading: #ffffff;
  --color-text-muted: #aaaaaa;

  --color-primary: #fdfcf5;
  --color-primary-hover: #ffffff;
  --color-primary-rgb: 253, 252, 245;
  --color-on-primary: #000000;
}

/* ─── Animations Keyframes ─── */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes checkered-flag {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

/* Utility animation classes */
.anim-fade-in { animation: fade-in 0.6s var(--ease-out) both; }
.anim-fade-up { animation: fade-up 0.6s var(--ease-out) both; }
.anim-fade-down { animation: fade-down 0.5s var(--ease-out) both; }
.anim-scale-in { animation: scale-in 0.4s var(--ease-spring) both; }

/* Stagger delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Intersection Observer — reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Checkered flag pattern (for decorative use) */
.checkered {
  background-image:
    linear-gradient(45deg, var(--color-accent) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-accent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-accent) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-accent) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}