/* ============================================================================
   DIRECTIONS — jetons de couleur, de forme et de typographie
   ----------------------------------------------------------------------------
   Une seule source pour les SEPT directions artistiques. Tout ce qui suit est
   exprimé en variables --c-*, le seul bloc que apply-brand réécrit avec la
   palette du client : un client, une palette, sept interprétations.

   Ce fichier ne contient AUCUNE règle de composant. Il est chargé par :
     · assets/sous-pages.css   (pages transverses, fiches produit, simulateurs)
     · assets/chrome-planche.css (coquille de production des 4 directions
       issues de la planche : en-tête, mega-menu, formulaire, pied de page)

   Les polices sont vendorisées dans assets/fonts/ (aucun CDN).
   ============================================================================ */

:root,
html[data-dir='premium'] {
  --sp-page: var(--c-paper);
  --sp-surface: #fff;
  --sp-soft: var(--c-cream);
  --sp-ink: var(--c-ink);
  --sp-ink-rgb: var(--c-ink-rgb);
  --sp-brand: var(--c-primary);
  --sp-brand-rgb: var(--c-primary-rgb);
  --sp-brand-deep: var(--c-primary-deep);
  --sp-brand-deep-rgb: var(--c-primary-deep-rgb);
  --sp-accent: var(--c-accent);
  --sp-accent-rgb: var(--c-accent-rgb);
  --sp-accent-ink: var(--c-accent2);
  --sp-on-accent: var(--c-primary-deep);

  --sp-line: rgb(var(--c-ink-rgb) / 0.09);
  --sp-line-strong: rgb(var(--c-ink-rgb) / 0.16);
  --sp-muted: rgb(var(--c-ink-rgb) / 0.72);
  --sp-faint: rgb(var(--c-ink-rgb) / 0.55);

  --sp-r-card: 16px;
  --sp-r-lg: 18px;
  --sp-r-sm: 12px;
  --sp-r-input: 10px;
  --sp-r-pill: 999px;
  --sp-r-btn: 999px;

  --sp-shadow-card: 0 18px 40px -24px rgb(var(--c-primary-deep-rgb) / 0.35);
  --sp-shadow-lift: 0 24px 55px -30px rgb(var(--c-primary-deep-rgb) / 0.4);
  --sp-shadow-soft: 0 10px 30px -12px rgb(var(--c-primary-deep-rgb) / 0.4);

  --sp-font-display: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  --sp-font-body: var(--font-body, 'Manrope', system-ui, sans-serif);
  --sp-w-display: 800;
  --sp-track-display: -0.02em;
  --sp-body-size: 16.5px;
  --sp-body-lh: 1.65;
  --sp-wrap: 1120px;
  --sp-case-kick: uppercase;
  --sp-track-kick: 0.16em;
  --sp-lift: -3px;
}

html[data-dir='local'] {
  --sp-page: var(--c-paper);
  --sp-surface: #fff;
  --sp-soft: var(--c-cream);
  --sp-ink: var(--c-ink);
  --sp-ink-rgb: var(--c-ink-rgb);
  --sp-brand: var(--c-primary);
  --sp-brand-rgb: var(--c-primary-rgb);
  --sp-brand-deep: var(--c-primary-deep);
  --sp-brand-deep-rgb: var(--c-primary-deep-rgb);
  --sp-accent: var(--c-accent);
  --sp-accent-rgb: var(--c-accent-rgb);
  --sp-accent-ink: var(--c-accent2);
  --sp-on-accent: #fff;

  --sp-line: rgb(var(--c-primary-rgb) / 0.14);
  --sp-line-strong: rgb(var(--c-primary-rgb) / 0.24);
  --sp-muted: rgb(var(--c-ink-rgb) / 0.74);
  --sp-faint: rgb(var(--c-ink-rgb) / 0.58);

  --sp-r-card: 18px;
  --sp-r-lg: 24px;
  --sp-r-sm: 14px;
  --sp-r-input: 10px;
  --sp-r-pill: 999px;
  --sp-r-btn: 999px;

  --sp-shadow-card: 0 12px 26px -16px rgb(var(--c-primary-rgb) / 0.35);
  --sp-shadow-lift: 0 16px 30px -16px rgb(var(--c-primary-rgb) / 0.4);
  --sp-shadow-soft: 0 12px 26px -16px rgb(var(--c-primary-rgb) / 0.3);

  --sp-font-display: 'Nunito', system-ui, sans-serif;
  --sp-font-body: 'Karla', system-ui, sans-serif;
  --sp-w-display: 800;
  --sp-track-display: -0.015em;
  --sp-body-size: 16.5px;
  --sp-body-lh: 1.68;
  --sp-wrap: 1160px;
  --sp-case-kick: none;
  --sp-track-kick: 0.02em;
  --sp-lift: -4px;
}

html[data-dir='conversion'] {
  --sp-page: var(--c-paper);
  --sp-surface: #fff;
  --sp-soft: var(--c-cream);
  --sp-ink: var(--c-ink);
  --sp-ink-rgb: var(--c-ink-rgb);
  --sp-brand: var(--c-ink);
  --sp-brand-rgb: var(--c-ink-rgb);
  --sp-brand-deep: var(--c-primary-deep);
  --sp-brand-deep-rgb: var(--c-primary-deep-rgb);
  --sp-accent: var(--c-accent2);
  --sp-accent-rgb: var(--c-accent-rgb);
  --sp-accent-ink: var(--c-accent2);
  --sp-on-accent: #fff;

  --sp-line: rgb(var(--c-ink-rgb) / 0.12);
  --sp-line-strong: rgb(var(--c-ink-rgb) / 0.2);
  --sp-muted: rgb(var(--c-ink-rgb) / 0.7);
  --sp-faint: rgb(var(--c-ink-rgb) / 0.55);

  --sp-r-card: 12px;
  --sp-r-lg: 14px;
  --sp-r-sm: 10px;
  --sp-r-input: 10px;
  --sp-r-pill: 8px;
  --sp-r-btn: 10px;

  --sp-shadow-card: 0 14px 34px -22px rgb(var(--c-ink-rgb) / 0.5);
  --sp-shadow-lift: 0 20px 44px -26px rgb(var(--c-ink-rgb) / 0.55);
  --sp-shadow-soft: 0 10px 26px -14px rgb(var(--c-ink-rgb) / 0.45);

  --sp-font-display: 'Space Grotesk', system-ui, sans-serif;
  --sp-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --sp-w-display: 700;
  --sp-track-display: -0.025em;
  --sp-body-size: 16px;
  --sp-body-lh: 1.65;
  --sp-wrap: 1180px;
  --sp-case-kick: uppercase;
  --sp-track-kick: 0.12em;
  --sp-lift: -2px;
}


html[data-dir='bento'] {
  --sp-page: var(--c-primary-deep);
  --sp-surface: rgb(var(--c-primary-rgb) / 0.42);
  --sp-soft: rgb(var(--c-primary-rgb) / 0.24);
  --sp-ink: #eef4ff;
  --sp-ink-rgb: 238 244 255;
  --sp-brand: #ffffff;
  --sp-brand-rgb: 255 255 255;
  --sp-brand-deep: var(--c-primary-deep);
  --sp-brand-deep-rgb: var(--c-primary-deep-rgb);
  --sp-accent: var(--c-accent);
  --sp-accent-rgb: var(--c-accent-rgb);
  --sp-accent-ink: var(--c-accent);
  --sp-on-accent: var(--c-primary-deep);

  --sp-line: rgb(255 255 255 / 0.11);
  --sp-line-strong: rgb(255 255 255 / 0.2);
  --sp-muted: rgb(238 244 255 / 0.72);
  --sp-faint: rgb(238 244 255 / 0.52);

  --sp-r-card: 24px;
  --sp-r-lg: 28px;
  --sp-r-sm: 14px;
  --sp-r-input: 12px;
  --sp-r-pill: 999px;
  --sp-r-btn: 999px;

  --sp-shadow-card: 0 22px 48px -28px rgb(0 0 0 / 0.75);
  --sp-shadow-lift: 0 28px 60px -30px rgb(0 0 0 / 0.8);
  --sp-shadow-soft: 0 14px 34px -18px rgb(0 0 0 / 0.7);

  --sp-font-display: 'League Spartan', system-ui, sans-serif;
  --sp-font-body: 'Montserrat', system-ui, sans-serif;
  --sp-w-display: 700;
  --sp-track-display: -0.02em;
  --sp-body-size: 16px;
  --sp-body-lh: 1.62;
  --sp-wrap: 1200px;
  --sp-case-kick: none;
  --sp-track-kick: 0.02em;
  --sp-lift: -3px;
}
html[data-dir='swiss'] {
  --sp-page: #f4f3ef;
  --sp-surface: #ffffff;
  --sp-soft: var(--c-cream);
  --sp-ink: var(--c-ink);
  --sp-ink-rgb: var(--c-ink-rgb);
  --sp-brand: var(--c-primary);
  --sp-brand-rgb: var(--c-primary-rgb);
  --sp-brand-deep: var(--c-primary-deep);
  --sp-brand-deep-rgb: var(--c-primary-deep-rgb);
  --sp-accent: var(--c-accent);
  --sp-accent-rgb: var(--c-accent-rgb);
  --sp-accent-ink: var(--c-accent2);
  --sp-on-accent: var(--c-primary-deep);

  --sp-line: rgb(var(--c-primary-rgb) / 0.22);
  --sp-line-strong: rgb(var(--c-primary-rgb) / 0.42);
  --sp-muted: rgb(var(--c-ink-rgb) / 0.74);
  --sp-faint: rgb(var(--c-ink-rgb) / 0.55);

  --sp-r-card: 6px;
  --sp-r-lg: 6px;
  --sp-r-sm: 4px;
  --sp-r-input: 4px;
  --sp-r-pill: 4px;
  --sp-r-btn: 4px;

  --sp-shadow-card: none;
  --sp-shadow-lift: none;
  --sp-shadow-soft: none;

  --sp-font-display: 'Arimo', Helvetica, system-ui, sans-serif;
  --sp-font-body: 'Raleway', system-ui, sans-serif;
  --sp-w-display: 700;
  --sp-track-display: -0.03em;
  --sp-body-size: 16px;
  --sp-body-lh: 1.6;
  --sp-wrap: 1240px;
  --sp-case-kick: uppercase;
  --sp-track-kick: 0.14em;
  --sp-lift: 0px;
}
html[data-dir='precision'] {
  --sp-page: #ffffff;
  --sp-surface: #ffffff;
  --sp-soft: #f5f5f7;
  --sp-ink: #0a0a0f;
  --sp-ink-rgb: 10 10 15;
  --sp-brand: #0a0a0f;
  --sp-brand-rgb: 10 10 15;
  --sp-brand-deep: var(--c-primary-deep);
  --sp-brand-deep-rgb: var(--c-primary-deep-rgb);
  --sp-accent: var(--c-primary);
  --sp-accent-rgb: var(--c-primary-rgb);
  --sp-accent-ink: var(--c-primary);
  --sp-on-accent: #ffffff;

  --sp-line: #e4e4ea;
  --sp-line-strong: #0a0a0f;
  --sp-muted: #54545e;
  --sp-faint: #7a7a86;

  --sp-r-card: 6px;
  --sp-r-lg: 6px;
  --sp-r-sm: 4px;
  --sp-r-input: 4px;
  --sp-r-pill: 4px;
  --sp-r-btn: 4px;

  --sp-shadow-card: none;
  --sp-shadow-lift: none;
  --sp-shadow-soft: none;

  --sp-font-display: 'Space Grotesk', system-ui, sans-serif;
  --sp-font-body: 'Space Grotesk', system-ui, sans-serif;
  --sp-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sp-w-display: 700;
  --sp-track-display: -0.03em;
  --sp-body-size: 15.5px;
  --sp-body-lh: 1.6;
  --sp-wrap: 1240px;
  --sp-case-kick: uppercase;
  --sp-track-kick: 0.1em;
  --sp-lift: 0px;
}
html[data-dir='dossier'] {
  --sp-page: #f1ebdd;
  --sp-surface: #fbf7ee;
  --sp-soft: #e9e1cf;
  --sp-ink: #1e1a14;
  --sp-ink-rgb: 30 26 20;
  --sp-brand: #1e1a14;
  --sp-brand-rgb: 30 26 20;
  --sp-brand-deep: var(--c-primary-deep);
  --sp-brand-deep-rgb: var(--c-primary-deep-rgb);
  --sp-accent: var(--c-primary);
  --sp-accent-rgb: var(--c-primary-rgb);
  --sp-accent-ink: var(--c-primary);
  --sp-on-accent: #ffffff;

  --sp-line: #d6ccb6;
  --sp-line-strong: #b9ad92;
  --sp-muted: #5c5446;
  --sp-faint: #857b68;

  --sp-r-card: 4px;
  --sp-r-lg: 4px;
  --sp-r-sm: 3px;
  --sp-r-input: 3px;
  --sp-r-pill: 3px;
  --sp-r-btn: 3px;

  --sp-shadow-card: none;
  --sp-shadow-lift: none;
  --sp-shadow-soft: none;

  --sp-font-display: 'Newsreader', Georgia, serif;
  --sp-font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --sp-w-display: 500;
  --sp-track-display: -0.01em;
  --sp-body-size: 16.5px;
  --sp-body-lh: 1.7;
  --sp-wrap: 1140px;
  --sp-case-kick: uppercase;
  --sp-track-kick: 0.16em;
  --sp-lift: 0px;
}