/*
 * Jetons de design (couleurs) — un seul endroit pour changer l'apparence de toute l'app.
 * Style « Copilot Money » : natif iOS, aéré, données lisibles d'un coup d'œil (voir DESIGN SYSTEM).
 *
 * Thèmes : attribut data-theme de <html>, posé par le petit script en tête de index.html
 *   « auto » (par défaut) suit le réglage de l'appareil (prefers-color-scheme) · « clair » · « sombre » (js/utils/theme.js).
 *
 * Chaque jeton est exposé à Tailwind dans css/tailwind.src.css (ex. --c-surface → bg-surface, border-surface…).
 * Dans le code, on n'écrit JAMAIS de couleur en dur (bg-white, text-slate-600…) : toujours un jeton.
 *
 *   canvas      fond de page                     ink      texte principal
 *   surface     cartes, feuilles, menus          muted    texte secondaire (#8E8E93, les deux thèmes)
 *   surface-2   survol, bandeaux discrets        line     bordures et séparateurs
 *   surface-3   pastilles neutres, bulles        field    fond des champs de saisie
 *   primary     bleu d'action (#1877F2)          accent   élément actif, liens, courbes
 *   notice-*    encadrés « attention » (orange)  danger-* / success-*   erreurs (rouge) et revenus / sous budget (vert)
 *   shadow      ombre des cartes (très discrète en sombre)
 */
:root,
html[data-theme="clair"] {
  color-scheme: light;
  --c-canvas: #f7f7fa;
  --c-surface: #ffffff;
  --c-surface-2: #f2f2f7;
  --c-surface-3: #e5e5ea;
  --c-field: #f2f2f7;
  --c-line: #e5e5ea;
  --c-ink: #0b1a33;
  --c-muted: #8e8e93;

  --c-primary: #1877f2;
  --c-primary-hover: #1565d8;
  --c-accent: #1877f2;
  --c-focus: #1877f2;
  --c-pending: #1877f2;
  --c-badge-ink: #ffffff;

  --c-notice: #fff4e5;                 /* orange « attention » à 15 % */
  --c-notice-line: #ffd9a8;
  --c-notice-ink: #b35c00;
  --c-notice-chip: #ffe8cc;
  --c-warning: #ff9500;

  --c-danger: #ff3b30;
  --c-danger-soft: #ffecea;
  --c-danger-line: #ffc7c2;
  --c-danger-solid: #ff3b30;
  --c-danger-solid-hover: #e0352b;

  --c-success: #34c759;
  --c-success-soft: #e9f9ee;
  --c-success-line: #b5ecc5;

  --c-bar: rgb(255 255 255 / .82);

  --c-chart-main: #1877f2;
  --c-chart-good: #34c759;
  --c-chart-bad: #ff3b30;
  --c-chart-ref: #aeaeb2;

  --c-header-top: #1877f2;             /* en-tête bleu dégradé (iPhone) */
  --c-header-bottom: #4a9bf5;
  --shadow-card: 0 4px 12px rgb(0 0 0 / .05);
  --shadow-pop: 0 12px 32px rgb(0 0 0 / .14);
}

html[data-theme="sombre"] {
  color-scheme: dark;
  --c-canvas: #000000;
  --c-surface: #1c1c1e;
  --c-surface-2: #2c2c2e;
  --c-surface-3: #3a3a3c;
  --c-field: #2c2c2e;
  --c-line: #38383a;
  --c-ink: #ffffff;
  --c-muted: #8e8e93;

  --c-primary: #1877f2;
  --c-primary-hover: #3b8cf5;
  --c-accent: #4a9bf5;
  --c-focus: #4a9bf5;
  --c-pending: #1877f2;
  --c-badge-ink: #ffffff;

  --c-notice: #2e1f0a;
  --c-notice-line: #5c3d10;
  --c-notice-ink: #ffb340;
  --c-notice-chip: #3d2a0c;
  --c-warning: #ff9f0a;

  --c-danger: #ff453a;
  --c-danger-soft: #341a19;
  --c-danger-line: #6b2a26;
  --c-danger-solid: #ff453a;
  --c-danger-solid-hover: #ff6961;

  --c-success: #30d158;
  --c-success-soft: #12301b;
  --c-success-line: #1f5a30;

  --c-bar: rgb(18 18 20 / .82);

  --c-chart-main: #4a9bf5;
  --c-chart-good: #30d158;
  --c-chart-bad: #ff453a;
  --c-chart-ref: #636366;

  --c-header-top: #0f5fcc;
  --c-header-bottom: #1877f2;
  --shadow-card: 0 1px 0 rgb(255 255 255 / .04);
  --shadow-pop: 0 12px 32px rgb(0 0 0 / .5);
}