/* =====================================================================
   Crypto Trade — jetons de design (tokens.css)
   ---------------------------------------------------------------------
   Source unique de vérité pour couleurs, typographie, espacements,
   rayons, ombres et mouvement. AUCUNE règle de composant ici : les
   composants vivent dans components.css et ne consomment que ces
   variables. Référence : docs/design/DESIGN-GUIDE.md.

   Direction visuelle (13 oct. 2026) : neutres noir / blanc / gris façon
   tableau de bord Dokploy ; la couleur est réservée aux états.

   Thème : palette claire sur :root ; palette sombre
     1) automatique via prefers-color-scheme (sauf si data-theme="light"),
     2) forcée via <html data-theme="dark">.
   ===================================================================== */

/* ---------- Palette claire (défaut) ---------- */
:root {
  color-scheme: light;

  /* Marque */
  --color-primary: #18181B;            /* Noir neutre : CTA principal, liens, nav active */
  --color-primary-hover: #27272A;
  --color-primary-pressed: #000000;
  --color-on-primary: #FAFAFA;
  --color-primary-soft: #F0F0F1;       /* fond teinté (puces, lignes actives) */
  --color-primary-soft-text: #18181B;

  --color-accent: #F59E0B;             /* Ambre : attente, compte à rebours, CTA secondaire fort */
  --color-accent-pressed: #D97706;
  --color-on-accent: #18181B;
  --color-accent-soft: #FEF3C7;
  --color-accent-text: #92400E;        /* texte « sable » lisible sur fond clair (≥ 4,5:1) */

  /* Sémantique */
  --color-success: #16A34A;            /* icônes, bordures, fonds pleins (3:1) */
  --color-success-text: #15803D;       /* texte sur fond clair / soft (≥ 4,5:1) */
  --color-success-soft: #DCFCE7;
  --color-warning: #D97706;
  --color-warning-text: #92400E;
  --color-warning-soft: #FEF3C7;
  --color-danger: #DC2626;
  --color-danger-text: #B91C1C;
  --color-danger-soft: #FEE2E2;
  --color-info: #2563EB;
  --color-info-text: #1D4ED8;
  --color-info-soft: #DBEAFE;

  /* Surfaces et bordures */
  --color-bg: #FAFAFA;                 /* fond neutre de l'app */
  --color-surface: #FFFFFF;            /* cartes, feuilles, barres */
  --color-surface-2: #F4F4F5;          /* surface enfoncée : champs, chips inactifs */
  --color-surface-inverse: #18181B;    /* toasts */
  --color-on-inverse: #FAFAFA;
  --color-border: #E4E4E7;             /* séparateurs décoratifs */
  --color-border-strong: #8E8E96;      /* contours de champs (3:1 sur blanc) */
  --color-overlay: rgba(9, 9, 11, 0.5);

  /* Texte */
  --color-text: #09090B;               
  --color-text-secondary: #5F5F68;     /* gris (≥ 5:1 sur blanc) */
  --color-text-muted: #85858E;         /* placeholders, désactivé : jamais pour une info essentielle */
  --color-text-on-color: #FFFFFF;
  --color-link: #18181B;

  /* Opérateurs mobile money (couleurs de reconnaissance uniquement, texte toujours en encre) */
  --color-op-wave: #1BB7E8;
  --color-op-om: #FF7900;
  --color-op-free: #CD1E25;

  /* Score de risque back-office */
  --color-risk-low: #16A34A;
  --color-risk-medium: #D97706;
  --color-risk-high: #DC2626;
  --color-risk-severe: #86198F;

  /* Squelettes */
  --color-skeleton-base: #EDEDEF;
  --color-skeleton-shine: #F7F7F8;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(24, 24, 27, 0.28);
  --focus-ring-danger: 0 0 0 3px rgba(192, 57, 43, 0.35);

  /* ---------- Typographie ---------- */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;     /* 12 px : légendes, horodatage, badges */
  --text-sm: 0.875rem;    /* 14 px : métadonnées, tableaux denses */
  --text-base: 1rem;      /* 16 px : corps, minimum pour tout texte lisible */
  --text-md: 1.125rem;    /* 18 px : titres de carte */
  --text-lg: 1.25rem;     /* 20 px : titre d'écran */
  --text-xl: 1.5rem;      /* 24 px : montant secondaire */
  --text-2xl: 1.75rem;    /* 28 px : montant hero compact */
  --text-hero: 2.25rem;   /* 36 px : montant hero (solde, « Tu reçois ») */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.06em;

  /* ---------- Espacement (base 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;

  /* ---------- Dimensions ---------- */
  --tap-min: 48px;                /* cible tactile minimale (boutons, lignes, onglets) */
  --control-h: 48px;              /* hauteur des champs et boutons standard */
  --control-h-sm: 40px;
  --control-h-lg: 56px;
  --app-max-width: 480px;         /* app client centrée sur desktop */
  --app-gutter: 16px;
  --bottom-nav-h: 64px;
  --app-bar-h: 56px;
  --admin-sidebar-w: 240px;
  --admin-topbar-h: 56px;

  /* ---------- Rayons ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---------- Ombres ---------- */
  --shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.06);
  --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.08);
  --shadow-lg: 0 12px 32px rgba(9, 9, 11, 0.16);
  --shadow-sheet: 0 -8px 32px rgba(9, 9, 11, 0.18);

  /* ---------- Mouvement ---------- */
  --dur-fast: 120ms;      /* survol, pression */
  --dur-base: 200ms;      /* apparition, badge, toast */
  --dur-slow: 320ms;      /* feuille, navigation */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Plans ---------- */
  --z-app-bar: 20;
  --z-bottom-nav: 30;
  --z-banner: 40;
  --z-sheet: 50;
  --z-toast: 60;
}

/* ---------- Palette sombre automatique (sauf choix explicite « clair ») ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-primary: #FAFAFA;
    --color-primary-hover: #E4E4E7;
    --color-primary-pressed: #D4D4D8;
    --color-on-primary: #18181B;
    --color-primary-soft: #27272A;
    --color-primary-soft-text: #FAFAFA;

    --color-accent: #FBBF24;
    --color-accent-pressed: #F59E0B;
    --color-on-accent: #18181B;
    --color-accent-soft: #422006;
    --color-accent-text: #FCD34D;

    --color-success: #4ADE80;
    --color-success-text: #86EFAC;
    --color-success-soft: #052E16;
    --color-warning: #FBBF24;
    --color-warning-text: #FCD34D;
    --color-warning-soft: #422006;
    --color-danger: #F87171;
    --color-danger-text: #FCA5A5;
    --color-danger-soft: #450A0A;
    --color-info: #60A5FA;
    --color-info-text: #93C5FD;
    --color-info-soft: #172554;

    --color-bg: #09090B;
    --color-surface: #18181B;
    --color-surface-2: #27272A;
    --color-surface-inverse: #FAFAFA;
    --color-on-inverse: #18181B;
    --color-border: #27272A;
    --color-border-strong: #71717A;
    --color-overlay: rgba(0, 0, 0, 0.65);

    --color-text: #FAFAFA;
    --color-text-secondary: #A1A1AA;
    --color-text-muted: #7C7C86;
    --color-text-on-color: #09090B;
    --color-link: #FAFAFA;

    --color-op-wave: #3FC8F2;
    --color-op-om: #FF8F2E;
    --color-op-free: #F0484F;

    --color-risk-low: #4ADE80;
    --color-risk-medium: #FBBF24;
    --color-risk-high: #F87171;
    --color-risk-severe: #E879F9;

    --color-skeleton-base: #27272A;
    --color-skeleton-shine: #323238;

    --focus-ring: 0 0 0 3px rgba(250, 250, 250, 0.4);
    --focus-ring-danger: 0 0 0 3px rgba(255, 107, 99, 0.45);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.55);
  }
}

/* ---------- Palette sombre forcée (<html data-theme="dark">) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #FAFAFA;
  --color-primary-hover: #E4E4E7;
  --color-primary-pressed: #D4D4D8;
  --color-on-primary: #18181B;
  --color-primary-soft: #27272A;
  --color-primary-soft-text: #FAFAFA;

  --color-accent: #FBBF24;
  --color-accent-pressed: #F59E0B;
  --color-on-accent: #18181B;
  --color-accent-soft: #422006;
  --color-accent-text: #FCD34D;

  --color-success: #4ADE80;
  --color-success-text: #86EFAC;
  --color-success-soft: #052E16;
  --color-warning: #FBBF24;
  --color-warning-text: #FCD34D;
  --color-warning-soft: #422006;
  --color-danger: #F87171;
  --color-danger-text: #FCA5A5;
  --color-danger-soft: #450A0A;
  --color-info: #60A5FA;
  --color-info-text: #93C5FD;
  --color-info-soft: #172554;

  --color-bg: #09090B;
  --color-surface: #18181B;
  --color-surface-2: #27272A;
  --color-surface-inverse: #FAFAFA;
  --color-on-inverse: #18181B;
  --color-border: #27272A;
  --color-border-strong: #71717A;
  --color-overlay: rgba(0, 0, 0, 0.65);

  --color-text: #FAFAFA;
  --color-text-secondary: #A1A1AA;
  --color-text-muted: #7C7C86;
  --color-text-on-color: #09090B;
  --color-link: #FAFAFA;

  --color-op-wave: #3FC8F2;
  --color-op-om: #FF8F2E;
  --color-op-free: #F0484F;

  --color-risk-low: #4ADE80;
  --color-risk-medium: #FBBF24;
  --color-risk-high: #F87171;
  --color-risk-severe: #E879F9;

  --color-skeleton-base: #27272A;
  --color-skeleton-shine: #323238;

  --focus-ring: 0 0 0 3px rgba(250, 250, 250, 0.4);
  --focus-ring-danger: 0 0 0 3px rgba(255, 107, 99, 0.45);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.55);
}

/* ---------- Mouvement réduit : les durées tombent à 0 ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}