/* ==========================================================
   Finatrail — Design tokens v1 (direction « Altitude »)
   Thème sombre par défaut. Ajouter data-theme="light" sur <html> pour le clair.
   Polices : <link href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Figtree:wght@400;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
   ========================================================== */
:root {
  /* — Couleurs de marque (fixes) — */
  --ft-mint-300: #9BE6CC;
  --ft-mint-400: #6FD8B6;   /* principale (sur fond sombre) */
  --ft-mint-700: #0B6B55;   /* principale (sur fond clair) */
  --ft-lavender-300: #A9A6F2;
  --ft-lavender-700: #5B55C9;
  --ft-stone-500: #3E5450;
  --ft-ink: #0F1716;
  --ft-mist: #E6EEEB;

  /* — Couleurs de données (répartition) — */
  --ft-data-1: #6FD8B6; /* ETF */
  --ft-data-2: #A9A6F2; /* Actions */
  --ft-data-3: #7CC4F0; /* Crypto */
  --ft-data-4: #E7C08A; /* Obligations */
  --ft-data-5: #6E8580; /* Liquidités */

  /* — Typographie — */
  --ft-font-display: 'Sora', system-ui, sans-serif;
  --ft-font-body: 'Figtree', system-ui, sans-serif;
  --ft-font-mono: 'DM Mono', ui-monospace, monospace;
  --ft-text-xs: 0.75rem;   /* 12 */
  --ft-text-sm: 0.875rem;  /* 14 */
  --ft-text-base: 1rem;    /* 16 */
  --ft-text-md: 1.125rem;  /* 18 */
  --ft-text-lg: 1.375rem;  /* 22 */
  --ft-text-xl: 1.75rem;   /* 28 */
  --ft-text-2xl: 2.25rem;  /* 36 */
  --ft-text-3xl: 3rem;     /* 48 */
  --ft-text-4xl: 4rem;     /* 64 */
  --ft-leading-tight: 1.08;
  --ft-leading-snug: 1.3;
  --ft-leading-body: 1.55;
  --ft-tracking-display: -0.03em;
  --ft-weight-regular: 400;
  --ft-weight-semibold: 600;
  --ft-weight-bold: 700;

  /* — Espacements (base 4 px) — */
  --ft-space-1: 4px;
  --ft-space-2: 8px;
  --ft-space-3: 12px;
  --ft-space-4: 16px;
  --ft-space-5: 24px;
  --ft-space-6: 32px;
  --ft-space-7: 48px;
  --ft-space-8: 64px;
  --ft-space-9: 96px;
  --ft-container: 1120px;
  --ft-gutter: clamp(16px, 4vw, 40px);
  --ft-tap: 44px;          /* cible tactile minimum */
  --ft-tap-lg: 52px;       /* boutons principaux */
  --ft-bottom-nav: 72px;   /* barre de navigation mobile */

  /* — Rayons — */
  --ft-radius-sm: 8px;
  --ft-radius-md: 14px;
  --ft-radius-lg: 20px;
  --ft-radius-pill: 999px;

  /* — Ombres — */
  --ft-shadow-sm: 0 1px 2px rgba(5, 10, 9, 0.25);
  --ft-shadow-md: 0 8px 24px -8px rgba(5, 10, 9, 0.45);
  --ft-shadow-focus: 0 0 0 3px var(--ft-focus);

  /* — Thème SOMBRE (défaut) — */
  --ft-bg: #0F1716;
  --ft-surface: #17211F;
  --ft-surface-2: #1D2B28;
  --ft-border: #2A3936;
  --ft-text: #E6EEEB;          /* 15.4:1 sur --ft-bg */
  --ft-text-muted: #A3B2AE;    /* 8.2:1 */
  --ft-primary: #6FD8B6;       /* 10.5:1 */
  --ft-on-primary: #0F1716;
  --ft-secondary: #A9A6F2;     /* 8.1:1 */
  --ft-gain: #5FD39A;          /* 9.7:1 */
  --ft-loss: #FF8A7A;          /* 7.9:1 */
  --ft-flat: #A3B2AE;          /* 8.2:1 */
  --ft-gain-bg: #163126;
  --ft-loss-bg: #3A1E1C;
  --ft-focus: #A9A6F2;
  --ft-contour: #1C2826;       /* lignes de niveau */
  --ft-versed: #3E5450;        /* barres « total versé » */
  --ft-plan: #3E5450;          /* pointillés « à venir » / verrouillé */
  --ft-current: #A9A6F2;       /* étape en cours */
  --ft-current-halo: #2A2B47;
}

[data-theme="light"] {
  --ft-bg: #F4F7F6;
  --ft-surface: #FFFFFF;
  --ft-surface-2: #E9EFED;
  --ft-border: #D5DFDC;
  --ft-text: #0F1716;          /* 16.9:1 */
  --ft-text-muted: #52625E;    /* 6.0:1 */
  --ft-primary: #0B6B55;       /* 6.0:1 */
  --ft-on-primary: #FFFFFF;
  --ft-secondary: #5B55C9;     /* 5.4:1 */
  --ft-gain: #12784A;          /* 5.1:1 */
  --ft-loss: #C23A2B;          /* 4.95:1 */
  --ft-flat: #52625E;          /* 6.0:1 */
  --ft-gain-bg: #E2F4EA;
  --ft-loss-bg: #FBE7E4;
  --ft-focus: #5B55C9;
  --ft-contour: #E3EAE8;
  --ft-versed: #B9C7C3;
  --ft-plan: #9DB0AB;
  --ft-current: #5B55C9;
  --ft-current-halo: #E4E2FA;
  --ft-shadow-md: 0 8px 24px -10px rgba(15, 23, 22, 0.18);
}

/* — Utilitaires — */
:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: 3px; }
html { font-size: 100%; } /* tailles en rem : respectent le zoom texte du téléphone */
.ft-num { font-family: var(--ft-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ft-contour-bg { background-image: repeating-radial-gradient(circle at 85% 120%, transparent 0 22px, var(--ft-contour) 22px 23px); }