/* ==========================================================================
   OPTIMA LABS — Design tokens
   Toutes les couleurs, typographies, espacements, rayons et ombres du site.
   → À reporter dans Elementor : Réglages du site > Couleurs / Typographies globales.
   ========================================================================== */

/* Typographie : Anton (titres display condensés, esprit PeptideKoning)
   + Inter (corps et interface). → Typographies globales du kit Elementor. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ----- Fonds (violet profond, sombre mais jamais noir pur) ----- */
  --bg-0: #0D0916;        /* fond le plus profond (body) */
  --bg-1: #140E22;        /* sections alternées */
  --bg-2: #1B1430;        /* cartes, surfaces */
  --bg-3: #241A40;        /* surfaces surélevées, hover */
  --bg-4: #2E2152;        /* éléments actifs */

  /* ----- Violets d'accent ----- */
  --violet-200: #D8CCFA;  /* texte accentué clair */
  --violet-300: #B9A6F2;  /* liens, détails */
  --violet-400: #9D7FEA;  /* accent principal */
  --violet-500: #8460DE;  /* boutons */
  --violet-600: #6A46C4;  /* boutons hover / dégradés */
  --violet-700: #4F339B;  /* profondeur */

  /* ----- Texte ----- */
  --text-1: #F3F0FB;      /* titres */
  --text-2: #C9C2DC;      /* corps de texte */
  --text-3: #948BAD;      /* texte secondaire, légendes */

  /* ----- Fonctionnel ----- */
  --success: #46C68C;     /* stock, réassurance, barre livraison */
  --success-soft: rgba(70, 198, 140, 0.12);
  --danger: #E06A6A;
  --danger-soft: rgba(224, 106, 106, 0.12);
  --warning: #E0B76A;

  /* ----- Bordures & lignes ----- */
  --line-1: rgba(185, 166, 242, 0.10);  /* bordure discrète */
  --line-2: rgba(185, 166, 242, 0.18);  /* bordure visible */
  --line-3: rgba(185, 166, 242, 0.32);  /* bordure focus/hover */

  /* ----- Dégradés ----- */
  --grad-accent: linear-gradient(135deg, #8460DE 0%, #6A46C4 100%);
  --grad-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(132, 96, 222, 0.28), transparent 65%);
  --grad-card: linear-gradient(180deg, rgba(185, 166, 242, 0.05), rgba(185, 166, 242, 0) 40%);
  --grad-text: linear-gradient(120deg, #E6DDFB 20%, #A98BF0 80%);

  /* ----- Typographie ----- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Anton", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --fs-hero: clamp(2.1rem, 1.5rem + 3.2vw, 3.6rem);

  /* ----- Espacements ----- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-section: clamp(3rem, 2rem + 4vw, 6rem); /* rythme vertical des sections */

  /* ----- Rayons ----- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  /* ----- Ombres ----- */
  --shadow-1: 0 2px 10px rgba(5, 2, 12, 0.35);
  --shadow-2: 0 10px 34px rgba(5, 2, 12, 0.45);
  --shadow-glow: 0 4px 28px rgba(132, 96, 222, 0.28);
  --shadow-header: 0 6px 26px rgba(5, 2, 12, 0.38);

  /* ----- Largeurs ----- */
  --w-max: 1200px;
  --w-narrow: 820px;
  --w-text: 680px;

  /* ----- Header ----- */
  --header-h: 58px;

  /* ----- Transitions ----- */
  --t-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 450ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ----- Surfaces vitrées & superpositions (surchargées par theme-light.css) ----- */
  --header-glass: rgba(20, 14, 34, 0.72);      /* capsule header */
  --header-glass-top: rgba(20, 14, 34, 0.30);  /* capsule en haut du hero */
  --backdrop: rgba(8, 5, 15, 0.62);            /* fond des panneaux/modales */
  --btn-primary-text: #ffffff;                 /* texte du bouton principal */

  /* ----- Accents or & lavande (l'or = accent de marque FIN uniquement) ----- */
  --gold-300: #C9B37E;
  --gold-500: #A0854B;   /* or désaturé — CTA principal et détails actifs */
  --gold-600: #85702F;   /* or foncé — texte doré lisible (AA sur blanc) */
  --gold-soft: rgba(160, 133, 75, 0.09);
  --lav-200: #EDECF4;    /* lavande pâle neutre — fonds d'accent */
  --lav-400: #9A93B8;
  --lav-soft: #F2F1F7;

  /* ----- Couleurs fonctionnelles de réassurance (désaturées, AA) ----- */
  --fn-blue: #4E6FA3;        /* sécurité, paiement */
  --fn-blue-soft: rgba(78, 111, 163, 0.10);
  --fn-green: #3E9B6E;       /* validation, livraison, stock */
  --fn-green-soft: rgba(62, 155, 110, 0.10);
  --fn-violet: #7A6FB0;      /* recherche, analyses */
  --fn-violet-soft: rgba(122, 111, 176, 0.10);
  --fn-slate: #6E7A8C;       /* confidentialité, discrétion */
  --fn-slate-soft: rgba(110, 122, 140, 0.10);
  --tg-blue: #4592C4;        /* bleu Telegram désaturé (communauté) */

  /* ----- Échelle z-index (10..400) ----- */
  --z-sticky-buy: 90;
  --z-header: 100;
  --z-mobile-menu: 190;
  --z-cart: 200;
  --z-search: 210;
  --z-lightbox: 230;
  --z-toast: 250;
  --z-skip: 300;
  --z-agegate: 400;
}