@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@400;700&display=swap");

:root {
  --color-primary: #4A7B2D;
  --color-primary-50: #D4EAC7;
  --color-primary-100: #CEE8C0;
  --color-primary-200: #BDDFA9;
  --color-primary-300: #A1D284;
  --color-primary-400: #76BD4C;
  --color-primary-500: #4A7B2D;
  --color-primary-600: #385D22;
  --color-primary-700: #284319;
  --color-primary-800: #16250E;
  --color-primary-900: #070B04;
  --color-primary-950: #000000;
  --color-accent: #D58530;
  --color-accent-50: #FBF3EA;
  --color-accent-100: #F9EEE1;
  --color-accent-200: #F5E1CC;
  --color-accent-300: #EDCBA6;
  --color-accent-400: #E2AD73;
  --color-accent-500: #D58530;
  --color-accent-600: #AE6B24;
  --color-accent-700: #87531C;
  --color-accent-800: #5D3913;
  --color-accent-900: #37220B;
  --color-accent-950: #221507;
  --color-background: #ffffff;
  --color-foreground: #2b2218;
  --color-text-heading: #2b2218;
  --color-text-body: #3c3226;
  --color-text-muted: #6b5e52;
  --color-text-placeholder: #a09485;
  --color-text-disabled: #c4bab0;
  --color-text-link: #345721;
  --color-text-link-hover: #2b471b;
  --color-surface: #faf8f5;
  --color-surface-variant: #f5f1ec;
  --color-surface-elevated: #ffffff;
  --color-border: #d9d2ca;
  --color-border-light: #ebe5dd;
  --color-border-dark: #a09485;
  --color-semantic-success: #32551f;
  --color-semantic-success-light: #b0c2a6;
  --color-semantic-success-border: #8da183;
  --color-semantic-success-readable: #32551f;
  --color-semantic-error: #8a2222;
  --color-semantic-error-light: #e7aaaa;
  --color-semantic-error-border: #be8484;
  --color-semantic-error-readable: #8a2222;
  --color-semantic-warning: #6e4116;
  --color-semantic-warning-light: #dcb692;
  --color-semantic-warning-border: #a88d73;
  --color-semantic-warning-readable: #6e4116;
  --color-semantic-info: #1e4c7b;
  --color-semantic-info-light: #a2bedc;
  --color-semantic-info-border: #7f99b4;
  --color-semantic-info-readable: #1e4c7b;
  --color-primary-readable: #385d22;
  --color-text-muted-readable: #6b5e52;
  --header-bg: #3c3226;
  --header-text: #f5f1ec;
  --header-link: #a8cd8e;
  --header-link-hover: #cce2bb;
  --header-border: #2b2218;
  --footer-bg: #2b2218;
  --footer-text: #e5e0da;
  --footer-link: #a8cd8e;
  --footer-link-hover: #cce2bb;
  --footer-border: #3c3226;
  --nav-bg: #4a7c2e;
  --nav-text: #ffffff;
  --nav-link: #e5f0dc;
  --nav-link-hover: #ffffff;
  --nav-border: #3f6a27;
  --color-btn-primary-bg: #3f6a27;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #345721;
  --color-btn-primary-border: #3f6a27;
  --color-btn-secondary-bg: #f5f1ec;
  --color-btn-secondary-text: #3c3226;
  --color-btn-secondary-hover: #ebe5dd;
  --color-btn-secondary-border: #c4bab0;
  --font-family-heading: Playfair Display;
  --font-heading-weights: 400,700;
  --font-family-body: Source Sans Pro;
  --font-body-weights: 400,700;
  --spacing-base: 4px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --border-width-thin: 1px;
  --border-width: 2px;
  --border-width-thick: 4px;
}

:root:where([data-theme-mode="light"]) {
  --color-primary: #4A7B2D;
  --color-primary-50: #D4EAC7;
  --color-primary-100: #CEE8C0;
  --color-primary-200: #BDDFA9;
  --color-primary-300: #A1D284;
  --color-primary-400: #76BD4C;
  --color-primary-500: #4A7B2D;
  --color-primary-600: #385D22;
  --color-primary-700: #284319;
  --color-primary-800: #16250E;
  --color-primary-900: #070B04;
  --color-primary-950: #000000;
  --color-accent: #D58530;
  --color-accent-50: #FBF3EA;
  --color-accent-100: #F9EEE1;
  --color-accent-200: #F5E1CC;
  --color-accent-300: #EDCBA6;
  --color-accent-400: #E2AD73;
  --color-accent-500: #D58530;
  --color-accent-600: #AE6B24;
  --color-accent-700: #87531C;
  --color-accent-800: #5D3913;
  --color-accent-900: #37220B;
  --color-accent-950: #221507;
  --color-background: #ffffff;
  --color-foreground: #2b2218;
  --color-text-heading: #2b2218;
  --color-text-body: #3c3226;
  --color-text-muted: #6b5e52;
  --color-text-placeholder: #a09485;
  --color-text-disabled: #c4bab0;
  --color-text-link: #345721;
  --color-text-link-hover: #2b471b;
  --color-surface: #faf8f5;
  --color-surface-variant: #f5f1ec;
  --color-surface-elevated: #ffffff;
  --color-border: #d9d2ca;
  --color-border-light: #ebe5dd;
  --color-border-dark: #a09485;
  --color-semantic-success: #32551f;
  --color-semantic-success-light: #b0c2a6;
  --color-semantic-success-border: #8da183;
  --color-semantic-success-readable: #32551f;
  --color-semantic-error: #8a2222;
  --color-semantic-error-light: #e7aaaa;
  --color-semantic-error-border: #be8484;
  --color-semantic-error-readable: #8a2222;
  --color-semantic-warning: #6e4116;
  --color-semantic-warning-light: #dcb692;
  --color-semantic-warning-border: #a88d73;
  --color-semantic-warning-readable: #6e4116;
  --color-semantic-info: #1e4c7b;
  --color-semantic-info-light: #a2bedc;
  --color-semantic-info-border: #7f99b4;
  --color-semantic-info-readable: #1e4c7b;
  --color-primary-readable: #385d22;
  --color-text-muted-readable: #6b5e52;
  --header-bg: #3c3226;
  --header-text: #f5f1ec;
  --header-link: #a8cd8e;
  --header-link-hover: #cce2bb;
  --header-border: #2b2218;
  --footer-bg: #2b2218;
  --footer-text: #e5e0da;
  --footer-link: #a8cd8e;
  --footer-link-hover: #cce2bb;
  --footer-border: #3c3226;
  --nav-bg: #4a7c2e;
  --nav-text: #ffffff;
  --nav-link: #e5f0dc;
  --nav-link-hover: #ffffff;
  --nav-border: #3f6a27;
  --color-btn-primary-bg: #3f6a27;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #345721;
  --color-btn-primary-border: #3f6a27;
  --color-btn-secondary-bg: #f5f1ec;
  --color-btn-secondary-text: #3c3226;
  --color-btn-secondary-hover: #ebe5dd;
  --color-btn-secondary-border: #c4bab0;
  --font-family-heading: Playfair Display;
  --font-heading-weights: 400,700;
  --font-family-body: Source Sans Pro;
  --font-body-weights: 400,700;
  --spacing-base: 4px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --border-width-thin: 1px;
  --border-width: 2px;
  --border-width-thick: 4px;
}