/* ==========================================================================
   TOKENS — toutes les valeurs de design centralisées ici.
   Modifier une couleur / taille ici la change sur tout le site.
   ========================================================================== */

:root {
  /* ---- Couleurs ---- */
  --color-accent: #ff4400;          /* orange ONIX (boutons, badges) */
  --color-accent-hover: #e63d00;
  --color-accent-rgb: 255, 68, 0;   /* même couleur, pour rgba(var(--color-accent-rgb), .2) */
  --color-text: #0d0d0d;
  --color-text-muted: #555;
  --color-bg: #ffffff;
  --color-surface: #f4f1eb;          /* fond beige carte ONIX gyro */
  --color-line: #d9d9d9;
  --color-on-accent: #ffffff;
  --color-on-image: #ffffff;

  /* Placeholders images (à supprimer quand toutes les images seront en place) */
  --color-placeholder: #e4e4e2;
  --color-placeholder-dark: #4a5046;

  /* ---- Typographie ---- */
  --font-main: "Kanit", system-ui, sans-serif;
  --font-price: "Oswald", "Arial Narrow", sans-serif;   /* prix */
  --font-condensed: "Oswald", "Arial Narrow", sans-serif; /* nav + bouton hero */
  --font-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace; /* codes techniques (LOG #001, DOC-01…) — pages légale + développement */

  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.875rem;     /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md: 1.125rem;     /* 18px */
  --fs-lg: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  --fs-xl: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  --fs-display: clamp(3.5rem, 1.5rem + 7vw, 8.5rem);   /* "PRODUITS" */
  --fs-hero-title: clamp(3rem, 1.5rem + 5vw, 6.5rem);  /* "TRAINING" */

  /* ---- Espacements ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* ---- Layout ---- */
  --container-max: 1400px;
  --gutter: clamp(1rem, 3.5vw, 3.25rem);
  --header-height: 100px;       /* le dégradé blanc couvre exactement cette hauteur */

  /* ---- Rayons ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: clamp(18px, 2.5vw, 36px);  /* hero / training */
  --radius-pill: 999px;

  /* ---- Liquid glass (barre de recherche, popovers) ---- */
  --glass-bg: rgba(var(--color-accent-rgb), 0.2);   /* accent à 20 % d'opacité */
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-blur: blur(18px) saturate(170%);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(255, 255, 255, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.1);

  /* ---- Divers ---- */
  --transition: 200ms ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* easeOutExpo : header + animations */
}