/* ═══════════════════════════════════════════════════════════
   IMMERSIF STUDIO — thèmes
   Un thème = un jeu de tokens posé sur n'importe quel élément :
   <html data-theme="…">     → tout le site
   <section data-theme="…">  → une seule section (mélange possible)

   Identité : VERRE (glassmorphism) sur fond vivant. Pastilles, cartes, panneaux,
   barre de navigation et dock sont des plaques de verre (--glass-*) posées sur un
   champ de lumière (--field-*). C'est la signature commune à tous les thèmes.

   Typographie : Inter (texte, interface) + Inter Tight (titres). Exceptions voulues :
   Mona Sans étroite (chrome), Bodoni Moda (heritage). Pas de serif éditoriale, pas de
   petites capitales mono, pas de séparateur « · » : c'est le style « assistant IA ».

   Familles :
   · futuriste (cœur) : spectre (défaut), porcelaine, chrome, terre
   · premium          : onyx, heritage
   · simple           : epure, nuit
   Aucun fond crème / jaunâtre.
   ═══════════════════════════════════════════════════════════ */

:root {
  --font-sans: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono-x: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-wide: 'Mona Sans', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-didone: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
}

/* ═════════════════ FUTURISTE ═════════════════ */

/* ─── SPECTRE (défaut) — nuit bleutée, lumière iridescente, verre froid.
   Tech, IA, SaaS, science, robotique, événements ─── */
:root,
[data-theme="spectre"] {
  --bg: #06070b;
  --surface: rgba(255, 255, 255, .045);
  --surface-solid: #0e1017;
  --ink: #eef1ff;
  --ink-2: #a3aac4;
  --line: rgba(160, 175, 255, .14);
  --accent: #8f7bff;
  --accent-ink: #06070b;
  --accent-2: #7fe6ff;
  --spectrum: linear-gradient(100deg, #7fe6ff 0%, #8f7bff 35%, #ff7ad9 65%, #ffb36b 100%);
  --fill: var(--spectrum);
  --btn-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 40px -12px var(--accent);
  --glass-bg: linear-gradient(140deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  --glass-border: rgba(200, 210, 255, .16);
  --glass-blur: 22px;
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 60px -32px rgba(0, 0, 0, .7);
  --field-a: #1d2cc4;
  --field-b: #0a86b8;
  --field-c: #6b22b8;
  --field-strength: .4;
  --grain: .05;
  --font-display: var(--font-sans);
  --font-text: var(--font-text-sans);
  --font-mono: var(--font-mono-x);
  --display-weight: 600;
  --display-wdth: 100%;
  --display-tracking: -0.04em;
  --display-style: normal;
  --display-case: none;
  --radius: 18px;
  color-scheme: dark;
}

/* ─── PORCELAINE — blanc froid, indigo électrique, verre laiteux.
   SaaS clair, santé, services, fintech ─── */
[data-theme="porcelaine"] {
  --bg: #eef1f7;
  --surface: rgba(255, 255, 255, .6);
  --surface-solid: #ffffff;
  --ink: #0b0e16;
  --ink-2: #555d72;
  --line: rgba(11, 14, 22, .1);
  --accent: #3d2bff;
  --accent-ink: #ffffff;
  --accent-2: #3d2bff;
  --spectrum: linear-gradient(100deg, #3d2bff 0%, #7a4dff 40%, #ff4d8d 75%, #ff7a45 100%);
  --fill: var(--spectrum);
  --btn-shadow: 0 10px 40px -12px var(--accent);
  --glass-bg: linear-gradient(140deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .38));
  --glass-border: rgba(255, 255, 255, .9);
  --glass-blur: 22px;
  --glass-highlight: inset 0 1px 0 #ffffff, 0 22px 50px -28px rgba(30, 30, 90, .28);
  --field-a: #9fb0ff;
  --field-b: #8fe0ff;
  --field-c: #d9a8ff;
  --field-strength: .75;
  --grain: .03;
  --font-display: var(--font-sans);
  --font-text: var(--font-text-sans);
  --font-mono: var(--font-mono-x);
  --display-weight: 600;
  --display-wdth: 100%;
  --display-tracking: -0.045em;
  --display-style: normal;
  --display-case: none;
  --radius: 18px;
  color-scheme: light;
}

/* ─── CHROME — graphite, métal liquide, capitales étroites, pointe orange.
   Industrie, mobilité, sport, mode, hardware ─── */
[data-theme="chrome"] {
  --bg: #121316;
  --surface: rgba(255, 255, 255, .05);
  --surface-solid: #1b1d21;
  --ink: #f2f3f5;
  --ink-2: #9a9faa;
  --line: rgba(255, 255, 255, .12);
  --accent: #d9dde4;
  --accent-ink: #121316;
  --accent-2: #ff5a36;
  --spectrum: linear-gradient(100deg, #8d929c 0%, #ffffff 30%, #9aa3b0 55%, #ffffff 80%, #8d929c 100%);
  --fill: var(--spectrum);
  --btn-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 40px -12px rgba(255,255,255,.3);
  --glass-bg: linear-gradient(140deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  --glass-border: rgba(255, 255, 255, .16);
  --glass-blur: 18px;
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .22), 0 24px 60px -32px rgba(0, 0, 0, .7);
  --field-a: #3a3f48;
  --field-b: #6b7380;
  --field-c: #ff5a36;
  --field-strength: .4;
  --grain: .06;
  --font-display: var(--font-wide);
  --font-text: var(--font-text-sans);
  --font-mono: var(--font-mono-x);
  --display-weight: 700;
  --display-wdth: 75%;
  --display-tracking: -0.01em;
  --display-style: normal;
  --display-case: uppercase;
  --radius: 10px;
  color-scheme: dark;
}

/* ─── TERRE — argile nocturne, terracotta, verre ambré.
   Artisans, restauration, hôtellerie, bien-être ─── */
[data-theme="terre"] {
  --bg: #150f0d;
  --surface: rgba(255, 230, 215, .05);
  --surface-solid: #1f1714;
  --ink: #f4ebe6;
  --ink-2: #bba59a;
  --line: rgba(255, 200, 170, .14);
  --accent: #ff7a4d;
  --accent-ink: #150f0d;
  --accent-2: #ff9b73;
  --spectrum: linear-gradient(100deg, #ff7a4d 0%, #ffb08a 40%, #d65a8a 100%);
  --fill: var(--spectrum);
  --btn-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 40px -12px var(--accent);
  --glass-bg: linear-gradient(140deg, rgba(255, 220, 200, .11), rgba(255, 220, 200, .03));
  --glass-border: rgba(255, 210, 185, .16);
  --glass-blur: 22px;
  --glass-highlight: inset 0 1px 0 rgba(255, 235, 220, .16), 0 24px 60px -32px rgba(0, 0, 0, .7);
  --field-a: #6a2a16;
  --field-b: #9a4222;
  --field-c: #43204a;
  --field-strength: .45;
  --grain: .06;
  --font-display: var(--font-sans);
  --font-text: var(--font-text-sans);
  --font-mono: var(--font-mono-x);
  --display-weight: 600;
  --display-wdth: 100%;
  --display-tracking: -0.04em;
  --display-style: normal;
  --display-case: none;
  --radius: 18px;
  color-scheme: dark;
}

/* ═════════════════ PREMIUM ═════════════════ */

/* ─── ONYX — noir graphite profond, lumière argentée et violette, verre épais.
   Premium tech, finance, conseil haut de gamme, automobile, produits « pro » ─── */
[data-theme="onyx"] {
  --bg: #050506;
  --surface: rgba(255, 255, 255, .04);
  --surface-solid: #0f0f12;
  --ink: #f5f5f7;
  --ink-2: #a1a1aa;
  --line: rgba(255, 255, 255, .1);
  --accent: #f5f5f7;
  --accent-ink: #050506;
  --accent-2: #c4b5fd;
  --spectrum: linear-gradient(100deg, #e4e4e7 0%, #c4b5fd 45%, #93c5fd 100%);
  --fill: linear-gradient(180deg, #ffffff, #d4d4d8);
  --btn-shadow: inset 0 1px 0 #ffffff, 0 12px 40px -14px rgba(196, 181, 253, .55);
  --glass-bg: linear-gradient(150deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  --glass-border: rgba(255, 255, 255, .12);
  --glass-blur: 28px;
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 80px -36px rgba(0, 0, 0, .9);
  --field-a: #2a2340;
  --field-b: #1b2433;
  --field-c: #3a2f5c;
  --field-strength: .5;
  --grain: .04;
  --font-display: var(--font-sans);
  --font-text: var(--font-text-sans);
  --font-mono: var(--font-mono-x);
  --display-weight: 500;
  --display-wdth: 100%;
  --display-tracking: -0.045em;
  --display-style: normal;
  --display-case: none;
  --radius: 20px;
  color-scheme: dark;
}

/* ─── HÉRITAGE — velours bordeaux-noir, or, didone pour les titres.
   Patrimoine, finance, institutions, culture, droit ─── */
[data-theme="heritage"] {
  --bg: #12070b;
  --surface: rgba(255, 220, 180, .05);
  --surface-solid: #1d0d12;
  --ink: #f6ecef;
  --ink-2: #c4a8ae;
  --line: rgba(232, 196, 140, .18);
  --accent: #e8c48c;
  --accent-ink: #12070b;
  --accent-2: #e8c48c;
  --spectrum: linear-gradient(100deg, #b98a4b 0%, #f6dcae 30%, #c99a5b 55%, #fff1d6 75%, #a8763a 100%);
  --fill: var(--spectrum);
  --btn-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 40px -12px var(--accent);
  --glass-bg: linear-gradient(140deg, rgba(255, 225, 190, .1), rgba(255, 225, 190, .025));
  --glass-border: rgba(232, 196, 140, .2);
  --glass-blur: 22px;
  --glass-highlight: inset 0 1px 0 rgba(255, 236, 210, .14), 0 24px 60px -32px rgba(0, 0, 0, .75);
  --field-a: #6d0f2a;
  --field-b: #3a0718;
  --field-c: #5a2a4a;
  --field-strength: .45;
  --grain: .06;
  --font-display: var(--font-didone);
  --font-text: var(--font-text-sans);
  --font-mono: var(--font-mono-x);
  --display-weight: 500;
  --display-wdth: 100%;
  --display-tracking: -0.02em;
  --display-style: normal;
  --display-case: none;
  --radius: 14px;
  color-scheme: dark;
}
[data-theme="heritage"] :is(.q, .display, h1, h2) em { font-style: italic; }

/* ═════════════════ SIMPLE ═════════════════ */

/* ─── ÉPURÉ — blanc, encre, verre clair sur un voile de lumière à peine visible.
   Quand le contenu doit parler seul : conseil, indépendants, SaaS sobre ─── */
[data-theme="epure"] {
  --bg: #fbfbfd;
  --surface: rgba(10, 10, 12, .03);
  --surface-solid: #ffffff;
  --ink: #0a0a0c;
  --ink-2: #62626b;
  --line: rgba(10, 10, 12, .1);
  --accent: #0a0a0c;
  --accent-ink: #ffffff;
  --accent-2: #0a0a0c;
  --spectrum: linear-gradient(#85858d, #85858d);   /* <em> de titre en gris : contraste discret */
  --fill: var(--accent);
  --btn-shadow: none;
  --glass-bg: linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .5));
  --glass-border: rgba(255, 255, 255, .95);
  --glass-blur: 20px;
  --glass-highlight: inset 0 1px 0 #ffffff, 0 16px 44px -26px rgba(20, 20, 40, .22);
  --field-a: #dfe5f3;
  --field-b: #e9edf5;
  --field-c: #e7e1f1;
  --field-strength: .8;
  --grain: 0;
  --font-display: var(--font-sans);
  --font-text: var(--font-text-sans);
  --font-mono: var(--font-mono-x);
  --display-weight: 600;
  --display-wdth: 100%;
  --display-tracking: -0.045em;
  --display-style: normal;
  --display-case: none;
  --radius: 16px;
  color-scheme: light;
}

/* ─── NUIT — l'épuré en sombre ─── */
[data-theme="nuit"] {
  --bg: #0b0b0d;
  --surface: rgba(255, 255, 255, .04);
  --surface-solid: #141417;
  --ink: #f4f4f5;
  --ink-2: #a0a0a8;
  --line: rgba(255, 255, 255, .1);
  --accent: #f4f4f5;
  --accent-ink: #0b0b0d;
  --accent-2: #f4f4f5;
  --spectrum: linear-gradient(#8f8f97, #8f8f97);
  --fill: var(--accent);
  --btn-shadow: none;
  --glass-bg: linear-gradient(140deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
  --glass-border: rgba(255, 255, 255, .11);
  --glass-blur: 20px;
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 60px -32px rgba(0, 0, 0, .7);
  --field-a: #1b1e2a;
  --field-b: #16171d;
  --field-c: #221c2c;
  --field-strength: .7;
  --grain: .03;
  --font-display: var(--font-sans);
  --font-text: var(--font-text-sans);
  --font-mono: var(--font-mono-x);
  --display-weight: 600;
  --display-wdth: 100%;
  --display-tracking: -0.045em;
  --display-style: normal;
  --display-case: none;
  --radius: 16px;
  color-scheme: dark;
}