/* All sizes and colours live here so they can be adjusted in one place.
   Mobile-first: the :root values are the phone values. */
: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-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;

  /* Sage (default theme) */
  --accent: #8A9A7B;
  --accent-strong: #5E6E50;
  --accent-soft: #EDF0E8;
  --on-accent: #FFFFFF;
  --gold: #B89B6A;
  --gold-text: #806539;
  --gold-soft: #F4EDE0;
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --text: #2E312A;
  --muted: #696D61;
  --border: #E7E2D8;
  --track: #EEEAE1;

  /* Spending donut: muted tones from each theme. The steps from dark to light are
     ordered so any two slices that end up side by side stay easy to tell apart. */
  --cat-1: #5E6E50;
  --cat-2: #B89B6A;
  --cat-3: #CBD4C2;
  --cat-4: #3F4A38;
  --cat-5: #8A9A7B;
  --cat-rest: #DDD8CE;

  /* Calendar dot for payments; kept distinct from the accent in every theme */
  --dot-pay: var(--gold-text);

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

[data-theme="blush"] {
  --accent: #D9A5A0;
  --accent-strong: #A05C56;
  --accent-soft: #F8EBE8;
  --cat-1: #A05C56;
  --cat-2: #D9A5A0;
  --cat-3: #EFD9D5;
  --cat-4: #6B4540;
  --cat-5: #C4A08F;
  --cat-rest: #E3DCD6;
  --gold: #C4A08F;
  --gold-text: #8A6358;
  --gold-soft: #F6ECE7;
  --bg: #FBF6F3;
  --text: #4A3835;
  --muted: #7C6661;
  --border: #EEE2DD;
  --track: #F2E8E4;
}

[data-theme="champagne"] {
  --accent: #D8C3A0;
  --accent-strong: #84673A;
  --accent-soft: #F5EEE1;
  --cat-1: #84673A;
  --cat-2: #B8975A;
  --cat-3: #D8C3A0;
  --cat-4: #4F3F24;
  --cat-5: #A8926A;
  --cat-rest: #E5E0D6;
  --gold: #B8975A;
  --gold-text: #7E6232;
  --gold-soft: #F5EEDF;
  --bg: #FCFAF6;
  --text: #38322A;
  --muted: #6F685C;
  --border: #ECE5D8;
  --track: #F1EBDF;
}

[data-theme="navy"] {
  --accent: #2E3A59;
  --accent-strong: #2E3A59;
  --accent-soft: #E9ECF3;
  --dot-pay: #B3A07A;
  --cat-1: #2E3A59;
  --cat-2: #B3A07A;
  --cat-3: #D3D8E3;
  --cat-4: #75653F;
  --cat-5: #7E8AA3;
  --cat-rest: #E4E2DC;
  --gold: #B3A07A;
  --gold-text: #75653F;
  --gold-soft: #F3EFE5;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #232A3D;
  --muted: #646B7C;
  --border: #E3E6ED;
  --track: #ECEEF3;
}

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