/* ============================================================
   MAD TRADING — Phase 8 · Design tokens « Finance Premium »
   Chargé APRÈS le <style> inline : redéfinit les variables du
   système ET mappe les variables historiques de l'application
   (--brand, --ink, --surface…) sur la nouvelle charte marine/or.
   Rollback : retirer ce <link> restaure la charte précédente
   (référence conservée dans public/style.legacy.css).
   ============================================================ */

:root {
  /* — Couleurs principales (évolution de la base bleue, pas rupture) — */
  --color-primary: #0a2540;        /* Bleu marine profond */
  --color-primary-light: #1e3a5f;
  --color-primary-dark: #051628;

  /* — Accents or (identité premium MAD TRADING) — */
  --color-gold: #c9a961;           /* Décor uniquement : filets, bordures, pastilles (contraste texte insuffisant) */
  --color-gold-light: #e6c98a;
  --color-gold-dark: #8b7340;      /* Texte doré lisible (AA sur fond clair) */

  /* — Neutres — */
  --color-bg: #fafbfc;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #f4f6f8;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;     /* Placeholders et éléments décoratifs uniquement */

  /* — Sémantiques (statuts) — */
  --color-success: #059669;  --color-success-bg: #ecfdf5;
  --color-warning: #d97706;  --color-warning-bg: #fffbeb;
  --color-error: #dc2626;    --color-error-bg: #fef2f2;
  --color-info: #2563eb;     --color-info-bg: #eff6ff;

  /* — Ombres (profondeur premium) — */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.16);

  /* — Rayons — */
  --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 14px;  --radius-xl: 20px;

  /* — Espacements (aéré premium) — */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;  --space-lg: 24px;  --space-xl: 40px;  --space-2xl: 64px;

  /* — Typographie — */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Monaco", ui-monospace, monospace;
  --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 15px;
  --font-size-lg: 18px; --font-size-xl: 24px; --font-size-2xl: 32px; --font-size-3xl: 40px;
  --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;

  /* ============================================================
     MAPPING des variables historiques de l'application
     (utilisées par le <style> inline ET les gabarits JS)
     ============================================================ */
  --bg: var(--color-bg);
  --surface: var(--color-bg-elevated);
  --surface-2: var(--color-bg-subtle);
  --ink: var(--color-text);
  --ink-2: var(--color-text-secondary);
  --muted: #64748b;                 /* Texte secondaire réel : AA (≈4.8:1) — #94a3b8 réservé aux placeholders */
  --line: var(--color-border);
  --line-2: #eef2f6;
  --brand: var(--color-primary);    /* Pétrole → marine profond : boutons primaires, liens, focus */
  --brand-2: var(--color-gold);     /* Corail → or : filets de titres, marqueurs de navigation */
  --brand-soft: #f8f1e1;            /* Fond or très pâle (harmonisé avec .btn-soft ci-dessous) */
  --nav: var(--color-primary);  /* Sidebar : marine primaire #0a2540 (validé visuellement, moins sombre) */
  --nav-2: #132b45;
  --nav-ink: #c9d4e3;
  --ok: var(--color-success);   --ok-bg: var(--color-success-bg);
  --warn: var(--color-warning); --warn-bg: var(--color-warning-bg);
  --bad: var(--color-error);    --bad-bg: var(--color-error-bg);
  --info: var(--color-info);    --info-bg: var(--color-info-bg);
  --slate: #64748b;             --slate-bg: #f1f5f9;
  --r: 15px; --r-sm: 11px; --r-xs: 8px;
  --sh-sm: 0 1px 2px rgba(15,31,56,.05), 0 1px 3px rgba(15,31,56,.05);
  --sh: 0 1px 3px rgba(15,31,56,.06), 0 8px 24px -10px rgba(15,31,56,.13);
  --sh-lg: 0 4px 14px rgba(15,31,56,.09), 0 28px 56px -18px rgba(15,31,56,.2);
}

/* — Canvas de l'application : ivoire → blanc cassé neutre,
     halo marine discret en haut (signature institutionnelle) — */
body {
  background:
    radial-gradient(ellipse at 84% -14%, rgba(10, 37, 64, 0.07), transparent 40%),
    radial-gradient(ellipse at 4% 6%, rgba(201, 169, 97, 0.035), transparent 26%),
    linear-gradient(180deg, #fcfdfe 0%, var(--bg) 55%, #f1f4f7 100%);
}

/* — Correction de cohérence immédiate liée au mapping :
     .btn-soft garde un texte rouge brique codé en dur dans le style
     inline ; sur le nouveau fond or pâle il devient doré foncé (AA). — */
.btn-soft { color: var(--color-gold-dark); }
.btn-soft:hover { background: #f3e8cd; }