:root {
  --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-heading: "DM Serif Text", "Georgia", serif;
  --font-code: "JetBrains Mono", "Fira Code", monospace;

  --md-sys-color-primary: #73594d;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #fbded0;
  --md-sys-color-on-primary-container: #2b160f;
  --md-sys-color-primary-tint: rgba(115, 89, 77, 0.18);

  --md-sys-color-secondary: #6f5b52;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #f8ddd2;
  --md-sys-color-on-secondary-container: #281913;

  --md-sys-color-tertiary: #5b6550;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ddebcf;
  --md-sys-color-on-tertiary-container: #17200f;

  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;

  --md-sys-color-surface: #fff8f5;
  --md-sys-color-surface-tint: rgba(111, 87, 74, 0.12);
  --md-sys-color-surface-container-low: #fffaf8;
  --md-sys-color-surface-container: #fdf2ec;
  --md-sys-color-surface-container-high: #f8e9e1;
  --md-sys-color-on-surface: #221a17;
  --md-sys-color-on-surface-variant: #55423a;
  --md-sys-color-outline: #85736b;
  --md-sys-color-outline-variant: #d8c2b8;

  --elevation-card: 0 10px 30px rgba(55, 39, 28, 0.08);
}

:root[data-theme="fjord"] {
  --md-sys-color-primary: #2f6678;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #cde9f4;
  --md-sys-color-on-primary-container: #051f28;
  --md-sys-color-primary-tint: rgba(47, 102, 120, 0.2);

  --md-sys-color-secondary: #4d626b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d0e6f2;
  --md-sys-color-on-secondary-container: #091f27;

  --md-sys-color-tertiary: #456179;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #d2e5ff;
  --md-sys-color-on-tertiary-container: #031d33;

  --md-sys-color-surface: #f5fbff;
  --md-sys-color-surface-tint: rgba(47, 102, 120, 0.12);
  --md-sys-color-surface-container-low: #fcfeff;
  --md-sys-color-surface-container: #ecf5fa;
  --md-sys-color-surface-container-high: #dfeef6;
  --md-sys-color-on-surface: #172126;
  --md-sys-color-on-surface-variant: #3f4f57;
  --md-sys-color-outline: #6f7f88;
  --md-sys-color-outline-variant: #becfd8;

  --elevation-card: 0 10px 30px rgba(22, 43, 53, 0.09);
}

:root[data-theme="spruce"] {
  --md-sys-color-primary: #39684c;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #bcefc9;
  --md-sys-color-on-primary-container: #062111;
  --md-sys-color-primary-tint: rgba(57, 104, 76, 0.18);

  --md-sys-color-secondary: #4f6354;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d2e8d4;
  --md-sys-color-on-secondary-container: #0d1f12;

  --md-sys-color-tertiary: #3f655f;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #c2ece4;
  --md-sys-color-on-tertiary-container: #021f1a;

  --md-sys-color-surface: #f5fbf5;
  --md-sys-color-surface-tint: rgba(57, 104, 76, 0.1);
  --md-sys-color-surface-container-low: #fcfffb;
  --md-sys-color-surface-container: #ebf4ea;
  --md-sys-color-surface-container-high: #deecdd;
  --md-sys-color-on-surface: #172119;
  --md-sys-color-on-surface-variant: #415246;
  --md-sys-color-outline: #708174;
  --md-sys-color-outline-variant: #c1d3c2;

  --elevation-card: 0 10px 30px rgba(24, 48, 32, 0.08);
}