/* ============================================================================
   CapBudget — Jetons de design (couleurs, typographie, rythme)
   Direction visuelle : « Éditorial rassurant »
   -> bleu ardoise + vert d'eau discret sur neutres chauds, titres serif.
   Cette palette est une PROPOSITION à valider avant intégration large.
   Pour ajuster l'identité : ne modifier que ce fichier.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Neutres chauds (fonds et surfaces) --- */
  --fond: #fbfaf7;
  --fond-alt: #f4f1ea;
  --surface: #ffffff;
  --surface-alt: #f7f5f0;
  --bordure: #e7e2d8;
  --bordure-forte: #d4cdbe;

  /* --- Texte --- */
  --texte: #1f2a33;          /* bleu ardoise très foncé */
  --texte-secondaire: #5b6770;
  --texte-discret: #808a91;
  --texte-sur-accent: #ffffff;

  /* --- Accents --- */
  --accent: #2e5a6b;         /* bleu ardoise : liens, boutons, en-têtes */
  --accent-fonce: #244857;
  --accent-doux: #e8eef0;    /* fond d'info, surlignage */
  --positif: #4c8c7d;        /* vert d'eau : épargne, éléments positifs */
  --positif-doux: #e6f0ed;
  --alerte: #b8722c;         /* ambre : alertes douces — jamais de rouge vif */
  --alerte-doux: #f6ece0;

  /* --- Barres de répartition 50/30/20 --- */
  --part-besoins: #2e5a6b;
  --part-envies: #4c8c7d;
  --part-epargne: #8a6d3b;
  --part-nonclasse: #b0a896;
  --repere-trait: #1f2a33;

  /* --- Palette catégories de dépenses (graphe empilé mois par mois) ---
     8 teintes distinctes (une par catégorie A–H, dans l'ordre de categories.json)
     + une pour les dépenses libres, + le vert d'eau (--positif) réservé au reste. */
  --cat-a: #2e5a6b; /* logement (= accent) */
  --cat-b: #b9862f; /* alimentation */
  --cat-c: #3d7a86; /* transports */
  --cat-d: #a65d63; /* santé */
  --cat-e: #7a6a9c; /* assurances / impôts */
  --cat-f: #c17a4f; /* enfants */
  --cat-g: #5f6ba8; /* loisirs */
  --cat-h: #8a7339; /* épargne / dettes */
  --cat-autres: #8a8272; /* dépenses libres, non catégorisées */

  /* --- Typographie --- */
  /* Fraunces et Inter sont hébergées localement (assets/css/polices.css) —
     aucun appel à Google Fonts. Les piles de secours couvrent le cas où une
     fonte ne se charge pas. */
  --police-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --taille-xs: 0.8125rem;   /* 13px */
  --taille-sm: 0.9375rem;   /* 15px */
  --taille-md: 1rem;        /* 16px */
  --taille-lg: 1.1875rem;   /* 19px */
  --taille-xl: 1.5rem;      /* 24px */
  --taille-2xl: 2rem;       /* 32px */
  --taille-3xl: 2.5rem;     /* 40px */

  /* --- Rythme --- */
  --pas: 8px;
  --esp-1: 8px;
  --esp-2: 16px;
  --esp-3: 24px;
  --esp-4: 32px;
  --esp-5: 48px;
  --esp-6: 72px;

  --rayon: 10px;
  --rayon-sm: 6px;
  --rayon-lg: 16px;

  --largeur-texte: 720px;
  --largeur-app: 960px;

  --ombre-carte: 0 1px 2px rgba(31, 42, 51, 0.06), 0 1px 3px rgba(31, 42, 51, 0.04);
  --contour-focus: 3px solid #2e5a6b;
}

/* ============================ MODE SOMBRE ============================ */
/* Rôles identiques, valeurs inversées. Défini pour le choix explicite
   ([data-theme]) ET pour la préférence système. */

:root[data-theme="sombre"] {
  color-scheme: dark;

  --fond: #161a1d;
  --fond-alt: #1b2024;
  --surface: #1f262b;
  --surface-alt: #252d33;
  --bordure: #333c42;
  --bordure-forte: #455057;

  --texte: #ece7dd;
  --texte-secondaire: #b0aca3;
  --texte-discret: #8a8880;
  --texte-sur-accent: #10171b;

  --accent: #7fb3c4;
  --accent-fonce: #9cc6d4;
  --accent-doux: #223037;
  --positif: #7fc4b4;
  --positif-doux: #1f2f2b;
  --alerte: #d99a5e;
  --alerte-doux: #33291d;

  --part-besoins: #7fb3c4;
  --part-envies: #7fc4b4;
  --part-epargne: #c2a06a;
  --part-nonclasse: #8a8272;
  --repere-trait: #ece7dd;

  --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --contour-focus: 3px solid #7fb3c4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;

    --fond: #161a1d;
    --fond-alt: #1b2024;
    --surface: #1f262b;
    --surface-alt: #252d33;
    --bordure: #333c42;
    --bordure-forte: #455057;

    --texte: #ece7dd;
    --texte-secondaire: #b0aca3;
    --texte-discret: #8a8880;
    --texte-sur-accent: #10171b;

    --accent: #7fb3c4;
    --accent-fonce: #9cc6d4;
    --accent-doux: #223037;
    --positif: #7fc4b4;
    --positif-doux: #1f2f2b;
    --alerte: #d99a5e;
    --alerte-doux: #33291d;

    --part-besoins: #7fb3c4;
    --part-envies: #7fc4b4;
    --part-epargne: #c2a06a;
    --part-nonclasse: #8a8272;
    --repere-trait: #ece7dd;

    --cat-a: #7fb3c4;
    --cat-b: #d9ab5c;
    --cat-c: #7fc0cc;
    --cat-d: #cf9297;
    --cat-e: #ad9bce;
    --cat-f: #dba37c;
    --cat-g: #9aa3d6;
    --cat-h: #bfa563;
    --cat-autres: #b3ab99;

    --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --contour-focus: 3px solid #7fb3c4;
  }
}