/* ==========================================================================
   Khdemti.ma — Design tokens
   Système monochrome : noir (#000) / blanc (#fff) + neutres de lisibilité.
   Aucune couleur. Radius minimal (direction suisse-brutaliste premium).
   ========================================================================== */

:root {
  /* ---- Couleurs (sémantiques) ------------------------------------------ */
  --ink: #000000;
  --paper: #ffffff;

  --gray-50:  #fafafa;
  --gray-100: #f4f4f4;
  --gray-200: #e7e7e7;
  --gray-300: #cfcfcf;
  --gray-400: #a8a8a8;
  --gray-500: #7d7d7d;
  --gray-600: #565656;
  --gray-700: #333333;
  --gray-800: #1a1a1a;
  --gray-900: #0b0b0b;

  /* Thème clair (défaut) */
  --color-bg:            var(--paper);
  --color-bg-alt:        var(--gray-50);
  --color-surface:       var(--paper);
  --color-text:          var(--ink);
  --color-text-muted:    var(--gray-600);          /* 7.3:1 sur blanc */
  --color-border:        var(--gray-200);
  --color-border-strong: var(--ink);

  /* Thème sombre (sections inversées) */
  --dark-bg:            var(--ink);
  --dark-bg-alt:        var(--gray-900);
  --dark-text:          var(--paper);
  --dark-text-muted:    var(--gray-400);           /* 7.5:1 sur noir */
  --dark-border:        rgba(255, 255, 255, 0.16);
  --dark-border-strong: var(--paper);

  /* Superpositions */
  --scrim: rgba(0, 0, 0, 0.55);
  --overlay-header: rgba(255, 255, 255, 0.86);
  --overlay-header-dark: rgba(0, 0, 0, 0.72);

  /* ---- Typographie ------------------------------------------------------ */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Échelle fluide (méthode Utopia — clamp) */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.37vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.33rem + 0.55vw, 1.80rem);
  --step-3:  clamp(1.73rem, 1.55rem + 0.90vw, 2.40rem);
  --step-4:  clamp(2.07rem, 1.79rem + 1.40vw, 3.20rem);
  --step-5:  clamp(2.49rem, 2.02rem + 2.33vw, 4.40rem);
  --step-6:  clamp(2.99rem, 2.20rem + 3.94vw, 6.00rem);

  --lh-display: 1.04;
  --lh-heading: 1.14;
  --lh-body: 1.65;

  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-eyebrow: 0.16em;

  /* ---- Espacement ------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  --space-l:   clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
  --space-xl:  clamp(3rem, 1.9rem + 5.2vw, 6.5rem);
  --space-2xl: clamp(4rem, 2.4rem + 7.6vw, 9rem);

  /* Section padding */
  --section-pad: clamp(4rem, 2.6rem + 6.6vw, 8rem);

  /* ---- Conteneur -------------------------------------------------------- */
  --container: 75rem;          /* 1200px */
  --container-wide: 87.5rem;   /* 1400px */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Rayons / bordures ------------------------------------------------ */
  --radius-none: 0px;          /* direction : angles vifs */
  --radius-sm: 2px;
  --radius-pill: 999px;
  --border-hairline: 1px;

  /* ---- Ombres (neutres, subtiles) --------------------------------------- */
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.07);
  --shadow-float: 0 2px 4px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.16);

  /* ---- Mouvement -------------------------------------------------------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-reveal: 640ms;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-scene: 0;
  --z-content: 2;
  --z-raised: 10;
  --z-sticky-bar: 90;
  --z-header: 100;
  --z-overlay: 200;

  /* ---- Divers ----------------------------------------------------------- */
  --header-h: 4.5rem;
  --wa-green: #25d366;  /* uniquement à l'intérieur de l'icône WhatsApp officielle */
}

/* Thème sombre local : toute section [data-theme="dark"] hérite des tokens */
[data-theme="dark"] {
  --color-bg:            var(--dark-bg);
  --color-bg-alt:        var(--dark-bg-alt);
  --color-surface:       var(--gray-900);
  --color-text:          var(--dark-text);
  --color-text-muted:    var(--dark-text-muted);
  --color-border:        var(--dark-border);
  --color-border-strong: var(--dark-border-strong);
}