/* All sizes and colours live here so they can be adjusted in one place.
   Mobile-first: the :root values are the phone values.
   Same design system as Wed & Calm; only the accent family is new (a calm deep green). */
:root {
  /* Type */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-title: 20px;
  --fs-stat: 22px;
  --fs-hero: 32px;
  --fs-input: 16px; /* 16px on phone stops iPhone zooming in on focus */
  --fs-control: 13px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --card-pad: 10px;
  --gap: 10px;

  /* Component sizes */
  --row-h: 34px;
  --item-h: 38px;
  --ctl-h: 38px;
  --icon: 16px;
  --icon-nav: 20px;
  --radius: 8px;
  --radius-lg: 10px;
  --sidebar-w: 200px;
  --bottom-h: 54px;
  --content-max: 1400px;
  --demo-h: 0px;

  /* Accent: deep green */
  --accent: #5F8B7E;
  --accent-strong: #2F5D50;
  --accent-soft: #E6EFEB;
  --on-accent: #FFFFFF;

  /* Shared with Wed & Calm */
  --gold: #B89B6A;
  --gold-text: #806539;
  --gold-soft: #F4EDE0;
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --text: #2E312A;
  --muted: #696D61;
  --border: #E7E2D8;
  --track: #EEEAE1;

  /* Chart series, in fixed order (never cycled). Checked with the dataviz palette validator
     on white: slots 1-4 pass every pair (crossing lines on Compare); 1-6 pass as neighbours
     (the balance-by-debt bar). More than six debts fold into "Other". */
  --series-1: #0E6B47;
  --series-2: #D2692E;
  --series-3: #3D6FD1;
  --series-4: #B3487E;
  --series-5: #8E9A2A;
  --series-6: #0A8FB0;
  --series-rest: #B9B4A8;
  --series-baseline: #A19D92; /* minimums only: a neutral, not a category */
  --grid: #EEEAE1;

  /* Status colours */
  --danger: #A23F37;
  --danger-soft: #F7E8E5;
  --shadow: 0 1px 2px rgba(40, 35, 25, .04);
}

@media (min-width: 768px) {
  :root {
    --fs-base: 13px;
    --fs-stat: 24px;
    --fs-hero: 40px;
    --fs-input: 13px;
    --card-pad: 12px;
    --gap: 12px;
    --ctl-h: 32px;
  }
}