/*
  Refalliance — Design tokens
  Copie locale de /design-system/tokens.css, gardée à l'intérieur de site/
  pour que le site fonctionne en file:// (Chrome bloque les liens relatifs
  "../" vers un dossier parent quand une page est ouverte en local sans
  serveur). Si les tokens évoluent, reporter le changement dans les deux
  fichiers.
  Voir l'aperçu visuel complet (palette, typographie, composants) :
  artifact "Refalliance Design System" — https://claude.ai/code/artifact/d9c98485-dcf1-473a-9fb5-0ef391e6f20a

  Révision bleu de marque (v2) : la famille --p-brand-blue-* est extraite
  par analyse pixel du logo REFALLIANCE_LOGO.jpg (bleu dominant #0F6BBF,
  marine profond #082552 issus du dégradé chromé du swoosh/lettrage).
  Elle remplace les anciennes familles --p-amber-* (accent) et --p-steel-*
  (icônes/dividers) par une seule famille de bleu cohérente, pour donner
  plus de place au bleu de marque dans les boutons, liens et accents.
*/

:root {
  /* ---- primitives ---- */
  --p-ink: #121820;
  --p-ink-raised: #1A2129;
  --p-ink-subtle: #202934;
  --p-slate: #2E3947;
  --p-slate-soft: #5B6572;
  --p-mist: #AEB9C2;
  --p-brand-blue: #0F6BBF;
  --p-brand-blue-hover: #0B5499;
  --p-brand-blue-press: #082552;
  --p-brand-blue-bright: #3B93E0;
  --p-brand-blue-soft: #4D6E8C;
  --p-brand-blue-deep: #123A61;
  --p-brand-blue-pale: #C9DEF0;
  --p-frost: #E7EEF1;
  --p-paper: #F9FAFA;
  --p-white: #FFFFFF;
  --p-border-light: #D7DEE2;
  --p-border-dark: #38424E;
  --p-danger: #C13A3A;
  --p-danger-dark: #D98282;
  --p-graphite: #7C8898;
  --p-graphite-dim: #4A5563;

  /* ---- typography ---- */
  --font-display: 'Archivo', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Public Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-h1: 2.25rem;     /* 36px */
  --text-h1-compact: 2rem; /* 32px — utility/legal page titles */
  --text-h2: 1.75rem;     /* 28px */
  --text-h3: 1.25rem;     /* 20px */
  --text-body-lg: 1.125rem; /* 18px */
  --text-body: 1rem;      /* 16px */
  --text-small: 0.875rem; /* 14px */
  --text-caption: 0.75rem; /* 12px */

  /* ---- shape ---- */
  --radius-sm: 2px; --radius-md: 4px;

  /* ---- semantic (light — default) ---- */
  --bg-page: var(--p-paper);
  --bg-surface: var(--p-white);
  --bg-subtle: var(--p-frost);
  --bg-inverse: var(--p-ink);
  --bg-inverse-raised: var(--p-ink-raised);
  --text-primary: var(--p-slate);
  --text-secondary: var(--p-slate-soft);
  --text-inverse: var(--p-paper);
  --text-inverse-secondary: var(--p-mist);
  --accent: var(--p-brand-blue);
  --accent-on: var(--p-white);
  --accent-strong: var(--p-brand-blue-hover);
  --accent-strong-hover: var(--p-brand-blue-press);
  --accent-on-inverse: var(--p-brand-blue);
  --danger: var(--p-danger);
  --cold: var(--p-brand-blue-soft);
  --cold-pale: var(--p-brand-blue-pale);
  --border: var(--p-border-light);
}

/* ---- semantic (dark — OS preference, unless page forces light) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: var(--p-ink);
    --bg-surface: var(--p-ink-raised);
    --bg-subtle: var(--p-ink-subtle);
    --bg-inverse: var(--p-paper);
    --bg-inverse-raised: var(--p-white);
    --text-primary: var(--p-paper);
    --text-secondary: var(--p-mist);
    --text-inverse: var(--p-slate);
    --text-inverse-secondary: var(--p-slate-soft);
    --accent: var(--p-brand-blue-bright);
    --accent-on: var(--p-ink);
    --accent-strong: var(--p-brand-blue-bright);
    --accent-strong-hover: var(--p-brand-blue);
    --accent-on-inverse: var(--p-brand-blue-hover);
    --danger: var(--p-danger-dark);
    --cold: var(--p-brand-blue-pale);
    --cold-pale: var(--p-brand-blue-deep);
    --border: var(--p-border-dark);
  }
}

/* ---- semantic (dark — explicit user/page choice) ---- */
:root[data-theme="dark"] {
  --bg-page: var(--p-ink);
  --bg-surface: var(--p-ink-raised);
  --bg-subtle: var(--p-ink-subtle);
  --bg-inverse: var(--p-paper);
  --bg-inverse-raised: var(--p-white);
  --text-primary: var(--p-paper);
  --text-secondary: var(--p-mist);
  --text-inverse: var(--p-slate);
  --text-inverse-secondary: var(--p-slate-soft);
  --accent: var(--p-brand-blue-bright);
  --accent-on: var(--p-ink);
  --cold: var(--p-brand-blue-pale);
  --cold-pale: var(--p-brand-blue-deep);
  --border: var(--p-border-dark);
}