/* ════════════════════════════════════════════════════════════════════════════
   tokens.css — Chantier Suite · SOURCE UNIQUE DE VÉRITÉ (design tokens)
   ─────────────────────────────────────────────────────────────────────────
   Standard suite = identité Finance (factur-track v4 « Hybride ») :
   fond ivoire chaud · primaire bleu #2563eb · accent or · Fraunces serif.

   RÈGLE : aucun fichier ne redéfinit ces valeurs. On consomme via var(--x).
   Pour migrer un module : servir ce fichier et le <link> AVANT son CSS,
   puis remapper les variables locales du module sur ces tokens (voir
   UI_AUDIT_CROSS_MVP_2026-06.md §5).

   Couleur d'accent par module (sémantique) :
     Finance  = bleu/or   Chantier = orange   Docs = vert   IA = violet   Prix = or
   ════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ─── Surfaces ─────────────────────────────────────────────────────────── */
  --bg:           #faf7f0;      /* ivoire chaud — signature suite */
  --bg-alt:       #f3eee2;      /* crème plus profond */
  --surface:      #ffffff;
  --surface-soft: #fbfaf6;

  /* ─── Brand (bleu — primaire canonique, partagé par les 3 modules) ──────── */
  --brand:        #2563eb;
  --brand-hover:  #1d4ed8;
  --brand-active: #1e40af;
  --brand-soft:   #eff6ff;
  --brand-line:   rgba(37, 99, 235, 0.25);
  --brand-ring:   rgba(37, 99, 235, 0.18);

  /* ─── Accent (or — highlights premium uniquement) ───────────────────────── */
  --gold:      #c69a4f;
  --gold-deep: #a07a36;
  --gold-soft: rgba(198, 154, 79, 0.12);
  --gold-line: rgba(198, 154, 79, 0.35);

  /* ─── Ink (texte — conforme WCAG AA sur ivoire) ─────────────────────────── */
  --ink:         #15171c;
  --ink-soft:    #475569;       /* corps */
  --ink-muted:   #6b7280;       /* secondaire (4.5:1+) */
  --ink-faint:   #726f67;       /* tertiaire — 4.69:1 sur ivoire (AA), vs #c5c4be qui échouait */
  --ink-inverse: #ffffff;

  /* ─── Lines ─────────────────────────────────────────────────────────────── */
  --line:        rgba(21, 23, 28, 0.08);
  --line-strong: rgba(21, 23, 28, 0.16);

  /* ─── Semantics (canoniques, AA sur ivoire) ─────────────────────────────── */
  --success: #059669; --success-soft: #d1fae5; --success-line: rgba(5,150,105,.25);
  --warning: #b45309; --warning-soft: #fef3c7; --warning-line: rgba(180,83,9,.25);
  --danger:  #dc2626; --danger-soft:  #fee2e2; --danger-line:  rgba(220,38,38,.25);
  --info:    #0891b2; --info-soft:    #cffafe; --info-line:    rgba(8,145,178,.25);

  /* ─── Couleurs sémantiques par module (pour cartes, barres, badges) ─────── */
  --mod-finance:  #2563eb; --mod-finance-bg:  #eff6ff;
  --mod-chantier: #c2691a; --mod-chantier-bg: #fdf0e3;   /* orange AA sur ivoire */
  --mod-docs:     #047857; --mod-docs-bg:     #e7f7f0;   /* vert AA sur ivoire */
  --mod-agent:    #6d28d9; --mod-agent-bg:    #f3effe;   /* violet */
  --mod-prix:     #a07a36; --mod-prix-bg:     #faf2da;   /* or profond */

  /* ─── Sidebar / topnav (slate dark — accord avec le bleu froid) ─────────── */
  --sb-bg:            #0f1729;
  --sb-bg-deep:       #0a0f1c;
  --sb-text:          #cbd5e1;       /* relevé vs #94a3b8 → AA sur slate */
  --sb-text-strong:   #f1f5f9;
  --sb-text-dim:      #94a3b8;
  --sb-active-bg:     rgba(37, 99, 235, 0.18);
  --sb-active-text:   #93c5fd;
  --sb-active-border: var(--brand);
  --sb-divider:       rgba(255, 255, 255, 0.06);

  /* ─── Geometry ──────────────────────────────────────────────────────────── */
  --r-sm: 4px;  --r: 6px;  --r-lg: 8px;  --r-xl: 12px;  --r-2xl: 16px;
  --w-nav: 240px;  --w-nav-collapsed: 56px;
  --topnav-h: 64px;
  --maxw: 1120px;

  /* ─── Échelle d'espacement ──────────────────────────────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ─── Échelle typographique ─────────────────────────────────────────────── */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px;
  --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 38px;

  /* ─── Shadows — discrètes, premium ──────────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(21,23,28,.04);
  --shadow-2: 0 1px 2px rgba(21,23,28,.04), 0 1px 1px rgba(21,23,28,.03);
  --shadow-3: 0 4px 6px -1px rgba(21,23,28,.06), 0 2px 4px -2px rgba(21,23,28,.04);
  --shadow-lg: 0 18px 44px rgba(21,23,28,.14);
  --shadow:   var(--shadow-2);

  /* ─── Type ──────────────────────────────────────────────────────────────── */
  --serif: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Menlo", Consolas, monospace;

  /* ─── Focus (clavier — appliqué globalement, voir plus bas) ─────────────── */
  --focus-ring: 0 0 0 3px var(--brand-ring);

  /* ─── Alias legacy (compat templates non migrés) ────────────────────────── */
  --bg-color: var(--bg);   --bg-2: var(--bg-alt);
  --border: var(--line);   --radius: var(--r-lg);
  --text: var(--ink);      --text-1: var(--ink);  --text-2: var(--ink-soft);  --text-3: var(--ink-muted);
  --muted: var(--ink-muted);
  --accent: var(--gold);   --accent-soft: var(--gold-soft);
  --nav-bg: var(--sb-bg);
  --primary: var(--brand); --primary-dark: var(--brand-hover);
  --blue: var(--brand);    --blue-d: var(--brand-hover);  --blue-bg: var(--brand-soft);
  --green: var(--success); --green-bg: var(--success-soft);
  --red: var(--danger);    --red-bg: var(--danger-soft);
  --amber: var(--warning); --amber-bg: var(--warning-soft);
  --purple: var(--mod-agent); --purple-bg: var(--mod-agent-bg);
}

/* ─── Accessibilité : focus clavier visible partout (WCAG 2.4.7) ──────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ─── Respect de prefers-reduced-motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}