/* =========================================================
   RNR Design Tokens — source de vérité CSS
   Extrait du projet Vite / index.css @theme
   ========================================================= */

:root {
  /* Brand Colors */
  --color-primary:           #e21e26;
  --color-accent:            #ffd700;
  --color-background-light:  #f8f9fa;
  --color-background-dark:   #1a1a1a;

  /* Typography */
  --font-heading: "Outfit", sans-serif;
  --font-body:    "Inter", sans-serif;
  --font-barlow:  "Barlow Condensed", sans-serif;

  /* Border Radius */
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Typography Scale — Fluid (Perfect Fourth 1.333) */
  --text-2xs:  0.6875rem;
  --text-xs:   clamp(0.75rem,  0.1vw + 0.7rem,  0.875rem);
  --text-sm:   clamp(0.875rem, 0.2vw + 0.8rem,  1rem);
  --text-base: clamp(1rem,     0.3vw + 0.9rem,  1.125rem);
  --text-h4:   clamp(1.33rem,  1.5vw + 1rem,    1.75rem);
  --text-h3:   clamp(1.77rem,  3vw + 1rem,      2.5rem);
  --text-h2:   clamp(2.36rem,  6vw + 1rem,      4.25rem);
  --text-h1:   clamp(3.15rem,  10vw + 1rem,     6.5rem);

  /* Fluid Spacing */
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-m:  clamp(1.5rem, 4vw, 3rem);
  --space-xl: clamp(3rem,   8vw, 6rem);

  /* Layout */
  --container-max: 1920px;
  --nav-height:    clamp(70px, 8vh, 100px);
}

/* ── Keyframes ────────────────────────────────────────────── */

@keyframes ken-burns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.1); }
}

@keyframes slide-up-fade {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes stretch-v {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes fade-in-right {
  0%   { opacity: 0; transform: translateX(20px); filter: blur(4px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}