/* =====================================================================
   tokens.css — Design system Banque Démo
   Identité par défaut inspirée de Wise : vert forêt + vert vif, icônes
   fines, gros chiffres. Les variables de MARQUE (--brand-*) sont
   surchargeables à chaud par le super-admin via un <style> injecté
   depuis la table settings (voir includes/brand.php).
   ===================================================================== */

:root {
  /* ---- MARQUE (surchargée par le super-admin) ---- */
  --brand-accent: #9FE870;        /* vert vif Wise : action principale, onglet actif */
  --brand-accent-ink: #163300;    /* texte sur l'accent */
  --brand-forest: #163300;        /* fond vert profond des cartes clés */
  --brand-ink: #0E1B00;           /* texte principal presque noir */
  --brand-bg: #F6F6F4;            /* fond de page crème */

  /* ---- Dérivés de marque ---- */
  --accent: var(--brand-accent);
  --accent-ink: var(--brand-accent-ink);
  --accent-soft: #EDF9E1;         /* fond d'icône clair assorti */
  --forest-900: var(--brand-forest);
  --forest-700: #2c5a12;
  --forest-500: #3B7A1E;          /* vert lisible pour montants positifs sur clair */

  /* ---- Couleurs sémantiques ---- */
  --success: #3B7A1E;
  --success-bg: #EDF9E1;
  --danger: #E24B4A;
  --danger-bg: #FDECEC;
  --warning: #B7791F;
  --warning-bg: #FBF0DA;
  --info: #185FA5;
  --info-bg: #E6F1FB;

  /* ---- Surfaces & texte ---- */
  --bg: var(--brand-bg);
  --surface: #ffffff;
  --surface-2: #f3f3ef;
  --border: #eceae2;
  --border-strong: #d9d7cd;

  --text: var(--brand-ink);
  --text-secondary: #55604a;
  --text-muted: #9aa08f;
  --text-on-forest: #EAF7DD;

  /* ---- Démo ---- */
  --demo: #B7791F;
  --demo-bg: #FBF0DA;
  --demo-border: #ecc98a;

  /* ---- Typographie ---- */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 0.6875rem;  --fs-sm: 0.8125rem;  --fs-md: 0.9375rem;  --fs-base: 1rem;
  --fs-lg: 1.125rem;   --fs-xl: 1.375rem;   --fs-2xl: 1.75rem;   --fs-3xl: 2.25rem;
  --fw-regular: 400;   --fw-medium: 500;    --fw-semibold: 600;
  --fw-bold: 700;      --fw-extrabold: 800;
  --lh: 1.6;

  /* ---- Espacements ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;

  /* ---- Rayons ---- */
  --radius-sm: 10px;  --radius: 14px;  --radius-lg: 18px;
  --radius-xl: 22px;  --radius-2xl: 26px;  --radius-pill: 999px;

  /* ---- Ombres ---- */
  --shadow-xs: 0 2px 8px rgba(10, 20, 0, 0.05);
  --shadow-sm: 0 3px 10px rgba(10, 20, 0, 0.06);
  --shadow: 0 4px 16px rgba(10, 20, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 20, 0, 0.10);
  --shadow-lg: 0 18px 44px rgba(10, 20, 0, 0.16);

  /* ---- Divers ---- */
  --header-h: 64px;  --bottomnav-h: 72px;  --sidebar-w: 260px;
  --container: 1160px;  --transition: 160ms ease;
  --focus-ring: 0 0 0 3px rgba(59, 122, 30, 0.3);

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}