/* ============================================================
   Design system Wynn's — direction « Premium technique éditorial »
   Tokens partagés (échelle typo, espacement, rayons, élévation,
   animation) + variables par face (consumer / pro).
   Les anciennes variables sont conservées pour compatibilité.
   ============================================================ */

:root {
  /* Familles typographiques */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;

  /* Échelle typographique fluide (clamp : mobile → desktop) */
  --fs-display: clamp(2.75rem, 7vw, 5.5rem);
  --fs-h1: clamp(2rem, 4.5vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* Échelle d'espacement (rythme 8pt) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* Rayons */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  /* Largeur de contenu */
  --container: 1180px;

  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* Angle signature du slope (pente du « i » ITW) */
  --slope-angle: 105deg;
}

.theme-consumer {
  /* CONSUMER — fond clair (CDC : « fond blanc, accents orange ; rose Maintenance »). */
  --bg: #ffffff;
  --bg-elev: #ffffff;           /* surface de carte */
  --surface: #f5f5f3;           /* fond de section alterné */
  --surface-2: #ececea;
  --text: #0e0e10;
  --text-soft: #5a5a60;
  --accent: #ff6a00;
  --accent-strong: #e85d00;     /* hover */
  --accent-text: #b74a00;       /* texte/liens orange sur fond clair (5.26:1 AA) */
  --accent-soft: #fff1e6;       /* fond teinté chaud clair */
  --accent-contrast: #0e0e10;   /* texte des boutons pleins : ink sur orange (6.7:1) */
  --maintenance: #ff3d87;       /* rose Maintenance (aplats/badges) */
  --maintenance-text: #c01f5e;  /* rose foncé lisible sur fond clair */
  --service: #ff6a00;           /* service consumer = orange */
  --service-text: #b74a00;
  /* texte des badges (sur fond teinté clair à 15%, donc plus foncé que -text) */
  --badge-problem-text: #8a3800;
  --badge-maintenance-text: #a8154f;
  --badge-service-text: #8a3800;
  --border: #e7e7e3;
  --border-strong: #d6d6d0;
  --slope-opacity: 0.05;

  --shadow-sm: 0 1px 2px rgba(14, 14, 16, 0.06), 0 1px 1px rgba(14, 14, 16, 0.04);
  --shadow-md: 0 6px 20px -6px rgba(14, 14, 16, 0.12), 0 2px 6px -2px rgba(14, 14, 16, 0.08);
  --shadow-lg: 0 24px 60px -16px rgba(14, 14, 16, 0.22), 0 8px 20px -8px rgba(14, 14, 16, 0.12);
  --shadow-accent: 0 12px 30px -8px rgba(255, 106, 0, 0.45);

  --scrim: rgba(10, 10, 12, 0.55);
}

.theme-pro {
  --bg: #0e0f11;
  --bg-elev: #17181b;
  --surface: #131417;
  --surface-2: #1d1f23;
  --text: #f5f6f7;
  --text-soft: #9a9da3;
  --accent: #ff7a18;
  --accent-strong: #ff8c38;
  --accent-text: #ff9445;       /* sur fond sombre, l'orange clair passe : 4.5:1+ */
  --accent-soft: #2a1c10;
  --accent-contrast: #0e0f11;
  --maintenance: #ff5c9a;
  --maintenance-text: #ff79ad;
  --service: #ffd000;
  --service-text: #ffd000;      /* jaune lisible sur fond sombre (12:1) */
  /* badges sur fond sombre : couleurs claires lisibles */
  --badge-problem-text: #ff9445;
  --badge-maintenance-text: #ff79ad;
  --badge-service-text: #ffd000;
  --border: #26282d;
  --border-strong: #34373d;
  --slope-opacity: 0.12;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 28px 70px -18px rgba(0, 0, 0, 0.75);
  --shadow-accent: 0 12px 34px -8px rgba(255, 122, 24, 0.5);

  --scrim: rgba(0, 0, 0, 0.6);
}

/* ---- Slope : trame de fond signature (filigrane) ---- */
.slope-bg {
  background-image: repeating-linear-gradient(
    var(--slope-angle), transparent 0 26px,
    rgba(255, 106, 0, var(--slope-opacity)) 26px 28px);
}

/* ---- Slope : barre d'accent inclinée (devant les titres de section) ---- */
.slope-mark {
  display: inline-block;
  width: 10px;
  height: 1em;
  margin-right: var(--sp-3);
  background: var(--accent);
  transform: skewX(-15deg);
  vertical-align: -0.08em;
  flex: none;
}