/* =============================================================
   ADN Design System — Tokens v2 "Swiss Editorial Fintech"
   ————————————————————————————————————————————————
   Direction : sobre, confiante, avec du caractère éditorial.
   Serif vivant (Instrument Serif) pour les chiffres hero et titres.
   Sans neutre et moderne (Geist) pour l'interface.
   Accents chauds (cream, terre cuite) pour casser le clinique.
   ============================================================= */

:root {
  /* ═══════════════════════════════════════════════════════════
     Marque ADN — identité signature (inchangée)
     ═══════════════════════════════════════════════════════════ */
  --adn-green:       #C5D930;   /* vert citron signature */
  --adn-green-mid:   #8FB54E;
  --adn-green-dark:  #3D7A3D;
  --adn-green-deep:  #2A5228;   /* pour textes sur fonds clairs */
  --adn-green-glow:  rgba(197, 217, 48, 0.18);
  --adn-anthracite:  #161A1D;   /* plus profond, légèrement warm */

  /* ═══════════════════════════════════════════════════════════
     Fonds chauds — cassent le blanc clinique des SaaS génériques
     ═══════════════════════════════════════════════════════════ */
  --adn-cream:       #F7F3EB;   /* papier, fond alternatif */
  --adn-cream-soft:  #FBF8F2;
  --adn-ivory:       #FDFCF8;   /* fond app premium */
  --adn-paper:       #FFFFFF;

  /* ═══════════════════════════════════════════════════════════
     Encre — warm ink, pas du noir bleu clinique
     ═══════════════════════════════════════════════════════════ */
  --adn-ink:        #1B1915;   /* texte principal — warm black */
  --adn-ink-soft:   #2E2B26;
  --adn-ink-mute:   #5C5951;
  --adn-ink-faint:  #8A877E;
  --adn-ink-ghost:  #B8B4A9;

  /* ═══════════════════════════════════════════════════════════
     Neutres warm (tons beige/taupe pour séparateurs et surfaces)
     ═══════════════════════════════════════════════════════════ */
  --adn-stone-50:  #F6F4EF;
  --adn-stone-100: #EDEAE1;
  --adn-stone-200: #DDD8CB;
  --adn-stone-300: #C7C0AE;
  --adn-stone-400: #A39D8C;
  --adn-stone-500: #6D6A60;
  --adn-stone-600: #4B4943;
  --adn-stone-700: #33322D;
  --adn-stone-800: #222119;
  --adn-stone-900: #141310;

  /* ═══════════════════════════════════════════════════════════
     Accents fonctionnels — terre/rouille, pas rouge Bootstrap
     ═══════════════════════════════════════════════════════════ */
  --adn-rust:       #B84A2B;   /* alertes, danger — terre cuite */
  --adn-rust-soft:  #D97757;
  --adn-rust-bg:    rgba(184, 74, 43, 0.08);
  --adn-amber:      #C8871B;   /* warning — or mat */
  --adn-amber-bg:   rgba(200, 135, 27, 0.10);
  --adn-forest:     #2D6A4F;   /* success — vert profond, pas Material */
  --adn-forest-bg:  rgba(45, 106, 79, 0.10);
  --adn-indigo:     #3949AB;   /* info — indigo deep */
  --adn-indigo-bg:  rgba(57, 73, 171, 0.08);

  /* ═══════════════════════════════════════════════════════════
     Drapeau Bénin (pour contextes Bénin)
     ═══════════════════════════════════════════════════════════ */
  --benin-red:    #E11B22;
  --benin-yellow: #FCD116;
  --benin-green:  #008751;

  /* ═══════════════════════════════════════════════════════════
     TYPOGRAPHIE — on quitte Inter, on vise l'editorial fintech
     - Instrument Serif : display, chiffres hero, accents italiques
     - Geist Sans : UI body, lisibilité pro
     - Geist Mono : chiffres tabulaires, codes, références
     ═══════════════════════════════════════════════════════════ */
  --font-serif: 'Instrument Serif', 'Fraunces', ui-serif, Georgia, Cambria, serif;
  --font-sans:  'Geist', 'Söhne', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Échelle typographique — ratio 1.25 "major third" */
  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  13px;
  --text-base:14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-hero:72px;    /* chiffres hero en Instrument Serif italic */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight: 1.05;
  --lh-snug:  1.3;
  --lh-base:  1.55;

  --ls-tight: -0.03em;
  --ls-snug:  -0.015em;
  --ls-wide:  0.04em;
  --ls-xwide: 0.14em;   /* small caps editorial */

  /* ═══════════════════════════════════════════════════════════
     Espacement — échelle multiple de 4
     ═══════════════════════════════════════════════════════════ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ═══════════════════════════════════════════════════════════
     Rayons — rigoureux, discrets (pas de rounded 2xl SaaS)
     ═══════════════════════════════════════════════════════════ */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-card: 8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════════════════════════
     Ombres — douces, warm, depth discrète
     ═══════════════════════════════════════════════════════════ */
  --shadow-hairline:   0 0 0 1px rgba(27, 25, 21, 0.06);
  --shadow-fine:       0 1px 0 rgba(27, 25, 21, 0.04), 0 0 0 1px rgba(27, 25, 21, 0.05);
  --shadow-card:       0 2px 8px -2px rgba(27, 25, 21, 0.06), 0 0 0 1px rgba(27, 25, 21, 0.05);
  --shadow-card-hover: 0 8px 24px -6px rgba(27, 25, 21, 0.12), 0 0 0 1px rgba(27, 25, 21, 0.06);
  --shadow-glow:       0 0 0 3px var(--adn-green-glow);
  --shadow-focus:      0 0 0 2px var(--adn-green), 0 0 0 4px var(--adn-green-glow);

  /* ═══════════════════════════════════════════════════════════
     Grain noise — texture subtile (SVG data URI)
     Applicable via background-image sur .adn-grain
     ═══════════════════════════════════════════════════════════ */
  --grain-noise: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* ═══════════════════════════════════════════════════════════
     Layout
     ═══════════════════════════════════════════════════════════ */
  --sidebar-width: 240px;
  --topbar-height: 64px;
  --max-content:   1440px;

  /* ═══════════════════════════════════════════════════════════
     Transitions — courbes douces (ease-out personnalisé)
     ═══════════════════════════════════════════════════════════ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast:  140ms var(--ease-out);
  --transition-base:  240ms var(--ease-out);
  --transition-slow:  400ms var(--ease-out);

  /* ═══════════════════════════════════════════════════════════
     Alias fonctionnels (tokens réutilisés par adn-theme.css)
     ═══════════════════════════════════════════════════════════ */
  --bg-app:        var(--adn-ivory);
  --bg-surface:    var(--adn-paper);
  --bg-elevated:   var(--adn-paper);
  --bg-sunken:     var(--adn-stone-50);
  --bg-sidebar:    var(--adn-ink);
  --bg-topbar:     var(--adn-ivory);

  --border-hair:   var(--adn-stone-100);
  --border-soft:   var(--adn-stone-200);
  --border-mid:    var(--adn-stone-300);

  --text-primary:   var(--adn-ink);
  --text-secondary: var(--adn-ink-soft);
  --text-muted:     var(--adn-ink-mute);
  --text-faint:     var(--adn-ink-faint);
  --text-inverse:   var(--adn-cream);

  --accent:          var(--adn-green);
  --accent-hover:    var(--adn-green-mid);
  --accent-contrast: var(--adn-anthracite);

  /* Status fonctionnels (terre/rouille plutôt que rouge sat) */
  --status-success: var(--adn-forest);
  --status-warning: var(--adn-amber);
  --status-danger:  var(--adn-rust);
  --status-info:    var(--adn-indigo);

  /* Legacy compat (pour ne rien casser sur anciens dashboards) */
  --color-success: var(--adn-forest);
  --color-warning: var(--adn-amber);
  --color-danger:  var(--adn-rust);
  --color-info:    var(--adn-indigo);
}

/* =============================================================
   Dark mode — ivory ink inversé, papier sombre
   Active via class="adn-dark" sur <html>
   ============================================================= */
.adn-dark,
.adn-dark:root {
  --bg-app:        var(--adn-stone-900);
  --bg-surface:    var(--adn-stone-800);
  --bg-elevated:   var(--adn-stone-700);
  --bg-sunken:     var(--adn-stone-900);
  --bg-topbar:     var(--adn-stone-800);
  --border-hair:   var(--adn-stone-700);
  --border-soft:   var(--adn-stone-600);
  --border-mid:    var(--adn-stone-500);

  --text-primary:   var(--adn-cream);
  --text-secondary: var(--adn-stone-200);
  --text-muted:     var(--adn-stone-300);
  --text-faint:     var(--adn-stone-400);
}