/* Reset, typographie et primitives partagées. */

* {
  box-sizing: border-box;
}

body {
  margin:                  0;
  background:              var(--bg);
  color:                   var(--ink);
  font-family:             var(--font-body);
  font-size:               var(--t-body);
  line-height:             1.5;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family:    var(--font-title);
  letter-spacing: -0.01em;
  font-weight:    600;
}

h1 {
  margin:    0;
  font-size: var(--t-h1);
}

h2 {
  margin:    0 0 1rem;
  font-size: var(--t-h2);
}

h3 {
  margin:    1.75rem 0 0.9rem;
  font-size: var(--t-h3);
}

a {
  color:           var(--ink);
  text-decoration: none;
}

a:hover {
  color: var(--teal-dark);
}

::selection {
  background: var(--teal);
  color:      var(--teal-ink);
}

:focus-visible {
  outline:        2px solid var(--teal-dark);
  outline-offset: 2px;
}

/* L'intitulé en capitales espacées qui coiffe chaque section du design. */
.eyebrow {
  font-family:    var(--font-mono);
  font-size:      var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--muted);
}

/* Tout ce qui est chiffre : montants, dates, numéros d'échéance. */
.num {
  font-family:          var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.amount-positive {
  color: var(--pos);
}

.amount-negative {
  color: var(--neg);
}

.muted {
  color:     var(--muted);
  font-size: var(--t-sub);
}

.empty {
  padding:       1.5rem;
  border-radius: var(--r-ctl);
  background:    var(--surface-soft);
  color:         var(--muted);
  font-size:     var(--t-sub);
  text-align:    center;
}

.align-right {
  text-align: right;
}

.visually-hidden {
  position:    absolute;
  width:       1px;
  height:      1px;
  overflow:    hidden;
  clip-path:   inset(50%);
  white-space: nowrap;
}