/*
 * Jetons des trois thèmes AURIS, clair et sombre. Refaits le 2026-09-26 à partir des
 * recommandations de la compétence ui-ux-pro-max (voir docs/website/05-visual-directions.md) :
 *   Apparence unique : Graphite clair (vault-graphite, mode light), D106. Les jetons du mode sombre
 *   restent définis mais ne sont plus proposés. Cabinet, Suisse, Verre et Nuit bleue retirés le 2026-09-26.
 * Même balisage partout ; seuls ces jetons et les règles de disposition de site.css changent.
 * Les noms --orb-bg, --orb-color-primary… reprennent ceux du socle.
 */

:root {
  --orb-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --orb-max: 1200px;
  --orb-narrow: 720px;
  --orb-gutter: clamp(20px, 4vw, 48px);
  --orb-section-space: clamp(80px, 11vw, 144px);
  --orb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ─── Coffre-fort : base commune des trois variantes (sombre, sécurité, premium). ───
 * Les boutons principaux sont clairs sur fond sombre ; la couleur est réservée au signal « protégé ».
 * Palette de départ de la compétence : « Password Manager — Vault dark blue + secure green ». */
[data-orb-theme^="vault"], [data-orb-theme^="vault"] .orb-public {
  --orb-font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --orb-display-weight: 500;
  --orb-display-tracking: -0.035em;
  --orb-hero-size: clamp(2.8rem, 5.6vw, 5.4rem);
  --orb-title-size: clamp(2.1rem, 3.6vw, 3.3rem);
  --orb-eyebrow-font: var(--orb-font-body);
  --orb-eyebrow-transform: uppercase;
  --orb-eyebrow-tracking: 0.24em;
  --orb-section-space: clamp(96px, 12vw, 168px);
}

/* Graphite (vault-graphite) : noir, platine, bleu glacier ; photos en noir et blanc. */
[data-orb-theme="vault-graphite"], [data-orb-theme="vault-graphite"] .orb-public { --orb-font-display: "Archivo", ui-sans-serif, system-ui, sans-serif; --orb-display-weight: 600; --orb-display-tracking: -0.045em; --orb-radius: 4px; --orb-radius-lg: 6px; --orb-button-radius: 4px; }
[data-orb-theme="vault-graphite"][data-mode="dark"], [data-orb-theme="vault-graphite"][data-mode="dark"] .orb-public {
  --orb-bg: #09090b; --orb-surface: #111113; --orb-surface-2: #0d0d0f; --orb-text: #ededed; --orb-muted: #a1a1aa; --orb-line: #232327;
  --orb-primary: #fafafa; --orb-on-primary: #09090b; --orb-primary-hover: #ffffff;
  --orb-accent: #7dd3fc; --orb-accent-strong: #bae6fd; --orb-accent-soft: rgb(125 211 252 / 0.08); --orb-on-accent: #09090b; --orb-highlight: #d4d4d8;
  --orb-hero-bg: #09090b; --orb-hero-text: #fafafa; --orb-hero-muted: #c4c4cc; --orb-signal: #7dd3fc; --orb-signal-line: rgb(125 211 252 / 0.3); --orb-signal-panel: rgb(9 9 11 / 0.55);
  --orb-signal-button: #fafafa; --orb-on-signal: #09090b; --orb-cta-bg: #111113;
  --orb-overlay: radial-gradient(ellipse 58% 62% at 50% 55%, rgb(9 9 11 / 0.7), rgb(9 9 11 / 0.42) 72%, rgb(9 9 11 / 0.3));
  --orb-overlay-mobile: linear-gradient(180deg, rgb(9 9 11 / 0.96) 0%, rgb(9 9 11 / 0.82) 42%, rgb(9 9 11 / 0.15) 72%, rgb(9 9 11 / 0) 100%);
  --orb-shadow: 0 0 0 1px rgb(255 255 255 / 0.04), 0 40px 80px -30px rgb(0 0 0 / 0.8);
  color-scheme: dark;
}
[data-orb-theme="vault-graphite"][data-mode="light"], [data-orb-theme="vault-graphite"][data-mode="light"] .orb-public {
  --orb-bg: #fafafa; --orb-surface: #ffffff; --orb-surface-2: #f4f4f5; --orb-text: #09090b; --orb-muted: #52525b; --orb-line: #e4e4e7;
  --orb-primary: #09090b; --orb-on-primary: #ffffff; --orb-primary-hover: #27272a;
  --orb-accent: #0369a1; --orb-accent-strong: #075985; --orb-accent-soft: #eef6fb; --orb-on-accent: #ffffff; --orb-highlight: #71717a;
  --orb-hero-bg: #09090b; --orb-hero-text: #fafafa; --orb-hero-muted: #c4c4cc; --orb-signal: #7dd3fc; --orb-signal-line: rgb(125 211 252 / 0.3); --orb-signal-panel: rgb(9 9 11 / 0.55);
  --orb-signal-button: #fafafa; --orb-on-signal: #09090b; --orb-cta-bg: #09090b;
  --orb-overlay: radial-gradient(ellipse 58% 62% at 50% 55%, rgb(9 9 11 / 0.7), rgb(9 9 11 / 0.42) 72%, rgb(9 9 11 / 0.3));
  --orb-overlay-mobile: linear-gradient(180deg, rgb(9 9 11 / 0.96) 0%, rgb(9 9 11 / 0.82) 42%, rgb(9 9 11 / 0.15) 72%, rgb(9 9 11 / 0) 100%);
  --orb-shadow: 0 1px 2px rgb(9 9 11 / 0.05), 0 30px 70px -30px rgb(9 9 11 / 0.25);
  color-scheme: light;
}

/* Correspondance avec les jetons du socle : ses pages suivent le thème choisi. */
[data-orb-theme], [data-orb-theme] .orb-public {
  --orb-font: var(--orb-font-body);
  --orb-color-primary: var(--orb-primary);
  --orb-color-primary-hover: var(--orb-primary-hover);
  --orb-color-on-primary: var(--orb-on-primary);
}