/* =========================================================
   DESIGN TOKENS — Benjamin Fernandez · Prothèse dentaire
   Système neumorphique (soft UI) — light & dark
   ========================================================= */

:root {
  /* ---- Surfaces & ombres neumorphiques ---- */
  --bg:            #e8ebf1;
  --bg-alt:        #eaedf3;
  --surface:       #e8ebf1;
  --surface-sunk:  #e4e7ee;
  --sh-d:          #c4c9d4;   /* ombre portée  */
  --sh-l:          #ffffff;   /* lumière       */

  /* ---- Texte ---- */
  --text:          #262b3a;
  --text-2:        #5a6278;
  --text-3:        #8b93a7;
  --text-inv:      #f7f9fc;

  /* ---- Couleurs de marque ---- */
  --accent:        #4f6ef2;
  --accent-soft:   #7a90f6;
  --accent-deep:   #3550cf;
  --accent-2:      #17c3b2;
  --accent-3:      #f0a33c;
  --danger:        #e0484d;
  --success:       #1fa971;

  --grad-brand:    linear-gradient(135deg, #4f6ef2 0%, #17c3b2 100%);
  --grad-warm:     linear-gradient(135deg, #f0a33c 0%, #e0648a 100%);
  --grad-sheen:    linear-gradient(120deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%);

  /* ---- Rayons ---- */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;
  --r-pill: 999px;

  /* ---- Ombres soft-UI ---- */
  --nm-xs:  4px  4px  8px var(--sh-d), -4px  -4px  8px var(--sh-l);
  --nm-sm:  6px  6px 13px var(--sh-d), -6px  -6px 13px var(--sh-l);
  --nm-md: 10px 10px 22px var(--sh-d), -10px -10px 22px var(--sh-l);
  --nm-lg: 18px 18px 38px var(--sh-d), -18px -18px 38px var(--sh-l);
  --nm-in:  inset 6px 6px 12px var(--sh-d), inset -6px -6px 12px var(--sh-l);
  --nm-in-sm: inset 3px 3px 7px var(--sh-d), inset -3px -3px 7px var(--sh-l);
  --nm-in-deep: inset 10px 10px 20px var(--sh-d), inset -10px -10px 20px var(--sh-l);
  --nm-flat: 2px 2px 5px var(--sh-d), -2px -2px 5px var(--sh-l);
  --glow-accent: 0 12px 30px -8px rgba(79,110,242,.55);

  /* ---- Typographie ---- */
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Sora", "Manrope", system-ui, sans-serif;
  --fs-hero: clamp(2.6rem, 6.4vw, 5.1rem);
  --fs-h1:   clamp(2.1rem, 4.6vw, 3.5rem);
  --fs-h2:   clamp(1.75rem, 3.4vw, 2.65rem);
  --fs-h3:   clamp(1.15rem, 1.8vw, 1.45rem);
  --fs-body: clamp(0.98rem, 1.05vw, 1.06rem);
  --fs-sm:   0.875rem;
  --fs-xs:   0.775rem;

  /* ---- Rythme ---- */
  --gutter: clamp(1.1rem, 3vw, 2rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --maxw: 1240px;

  /* ---- Mouvement ---- */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .18s;
  --t-med:  .38s;
  --t-slow: .75s;

  --header-h: 82px;
  color-scheme: light;
}

/* =========================================================
   THÈME SOMBRE
   ========================================================= */
[data-theme="dark"] {
  --bg:            #22252c;
  --bg-alt:        #24272f;
  --surface:       #22252c;
  --surface-sunk:  #1f2229;
  --sh-d:          #16181d;
  --sh-l:          #2e323c;

  --text:          #e9ecf3;
  --text-2:        #a8b0c2;
  --text-3:        #7b8397;
  --text-inv:      #14161b;

  --accent:        #6f8bff;
  --accent-soft:   #93a7ff;
  --accent-deep:   #4d6af0;
  --accent-2:      #2ad4c1;
  --accent-3:      #f5b45c;

  --grad-sheen:    linear-gradient(120deg, transparent 20%, rgba(255,255,255,.10) 50%, transparent 80%);
  --glow-accent:   0 12px 34px -8px rgba(111,139,255,.5);

  color-scheme: dark;
}

/* Accents alternatifs pilotés par data-accent (démo design system) */
[data-accent="mint"]  { --accent:#17c3b2; --accent-soft:#4ad6c8; --accent-deep:#0e9c8e; }
[data-accent="amber"] { --accent:#f0a33c; --accent-soft:#f7bd70; --accent-deep:#cf8420; }