/* Les tokens du design, relevés sur docs/design/Locafolio App.dc.html.
 *
 * Deux conventions tiennent tout le reste :
 *
 * - Le sens d'un montant se lit en couleur. Positif = vert, négatif =
 *   terracotta, jamais rouge : le rouge est réservé aux erreurs, pour qu'une
 *   dépense normale ne ressemble pas à un incident.
 * - Les chiffres sont en mono. Ce n'est pas décoratif : cela aligne les
 *   colonnes du grand livre et de l'échéancier, qui se lisent en pile.
 */

:root {
  /* --- Marque ---------------------------------------------------------- */
  --navy:         #1B3A57;
  --navy-hover:   #224565;
  --navy-line:    #2A4A66;
  --teal:         #2FBF8F;
  --teal-ink:     #08251A;
  --teal-dark:    #26A87C;

  /* --- Fonds et traits -------------------------------------------------- */
  --bg:           #F4F5F4;
  --surface:      #FFFFFF;
  --surface-soft: #FAFBFA;
  --surface-alt:  #F1F3F2;
  --line:         #E4E6E4;
  --line-strong:  #DCDEDC;
  --line-soft:    #EFF0EF;

  /* --- Texte ------------------------------------------------------------ */
  --ink:          #1B3A57;
  --ink-2:        #4C5A63;
  --muted:        #6C7A83;
  --muted-2:      #8A9399;
  --disabled:     #A6ADB2;

  /* --- Sens -------------------------------------------------------------- */
  --pos:          #1F8C68;
  --pos-strong:   #166B50;
  --pos-bg:       #EDF7F3;
  --pos-bg-2:     #D9F2E7;
  --neg:          #B4552F;
  --neg-strong:   #A84E2B;
  --neg-bg:       #F8EDE8;
  --warn:         #8A6A14;
  --warn-accent:  #C9A227;
  --warn-bg:      #FBF4E2;

  /* Le rouge ne sert qu'aux erreurs de saisie et aux actions destructrices. */
  --danger:       #B4552F;
  --danger-bg:    #F8EDE8;

  /* --- Sidebar ----------------------------------------------------------- */
  --side-fg:      #B8C9D4;
  --side-label:   #6E8798;
  --side-meta:    #8FA3B2;
  --side-width:   236px;

  /* --- Typographie -------------------------------------------------------- */
  --font-title: 'Saira Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* L'échelle du design, en px : le rapport entre 13 et 14 px porte la
     hiérarchie de la moitié des écrans, un rem l'aurait brouillé. */
  --t-micro:  10px;
  --t-label:  11px;
  --t-small:  12px;
  --t-sub:    13px;
  --t-body:   14px;
  --t-lead:   16px;
  --t-h3:     18px;
  --t-h2:     22px;
  --t-h1:     30px;
  --t-figure: 40px;

  /* --- Rayons ------------------------------------------------------------- */
  --r-badge:  4px;
  --r-ctl:    7px;
  --r-card:   9px;
  --r-panel:  10px;
  --r-pill:   20px;

  /* --- Espacements -------------------------------------------------------- */
  --pad-card: 20px 22px;
  --pad-cell: 13px 14px;
  --pad-ctl:  9px 13px;

  /* Une seule ombre dans tout le design : le bord d'une colonne figée. */
  --shadow-sticky: -10px 0 10px -10px rgba(27, 58, 87, 0.28);
}