/* Design-system tokens (« Calculo », tokens.json v1) as CSS custom properties. */
:root {
  /* Colour */
  --surface: #fbf6ee;
  --surface-raised: #ffffff;
  --surface-sunken: #f1e8da;
  --line: #e2d6c3;
  --line-strong: #b9a890;
  --ink: #2b2420;
  --ink-muted: #6a5d54;
  --brand: #c2512a;
  --brand-strong: #a4411f;
  --brand-soft: #f7dfd2;
  --on-brand: #ffffff;
  --success: #2f7a4f;
  --success-soft: #d9eedf;
  --danger: #b3362f;
  --danger-soft: #f8dcd9;
  --star: #d99a16;
  --star-soft: #fbeccb;
  --info: #1f5f8b;
  --info-soft: #dcebf5;
  --overlay: #2b2420b3;

  /* Type families */
  --font-sans: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-num: "Atkinson Hyperlegible", "Nunito", system-ui, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 1px 0 #e2d6c3, 0 6px 20px -8px #2b242026;
  --shadow-lift: 0 10px 28px -10px #2b242040;

  /* Motion: the one transition of the design system */
  --transition: 160ms ease-out;
}

/* Type styles */
.num-hero { font-family: var(--font-num); font-size: 112px; line-height: 1; font-weight: 700; }
.num-input { font-family: var(--font-num); font-size: 72px; line-height: 1; font-weight: 700; }
.num-grid { font-family: var(--font-num); font-size: 44px; line-height: 1; font-weight: 700; }
.num-carry { font-family: var(--font-num); font-size: 18px; line-height: 1; font-weight: 700; }
.num-choice { font-family: var(--font-num); font-size: 40px; line-height: 1; font-weight: 700; }
.num-stat { font-family: var(--font-num); font-size: 28px; line-height: 32px; font-weight: 700; }
.num-table { font-family: var(--font-num); font-size: 15px; line-height: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-num); font-weight: 700; }
.display { font-size: 48px; line-height: 52px; font-weight: 800; }
.title { font-size: 32px; line-height: 38px; font-weight: 800; }
.consigne { font-size: 26px; line-height: 32px; font-weight: 700; }
.heading { font-size: 20px; line-height: 26px; font-weight: 800; }
.body-lg { font-size: 20px; line-height: 30px; font-weight: 600; }
.body { font-size: 16px; line-height: 24px; font-weight: 500; }
.body-sm { font-size: 14px; line-height: 20px; font-weight: 500; }
.label { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }