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

:root {
  --color-primary: #397E20;
  --color-primary-50: #CBEEBE;
  --color-primary-100: #C4ECB6;
  --color-primary-200: #AEE59A;
  --color-primary-300: #8DDA71;
  --color-primary-400: #5CCB34;
  --color-primary-500: #397E20;
  --color-primary-600: #2C6119;
  --color-primary-700: #1E4111;
  --color-primary-800: #112409;
  --color-primary-900: #040802;
  --color-primary-950: #000000;
  --color-accent: #D93E36;
  --color-accent-50: #FCEFEE;
  --color-accent-100: #FAE6E5;
  --color-accent-200: #F6D2D0;
  --color-accent-300: #EFB1AE;
  --color-accent-400: #E57B76;
  --color-accent-500: #D93E36;
  --color-accent-600: #B82B23;
  --color-accent-700: #8D211B;
  --color-accent-800: #671814;
  --color-accent-900: #3C0E0B;
  --color-accent-950: #270907;
  --color-background: #ffffff;
  --color-foreground: #1b3a0e;
  --color-text-heading: #1b3a0e;
  --color-text-body: #2d3a28;
  --color-text-muted: #5a6e52;
  --color-text-placeholder: #8a9e80;
  --color-text-disabled: #b5c4ae;
  --color-text-link: #2e6418;
  --color-text-link-hover: #1b3a0e;
  --color-surface: #f5f8f3;
  --color-surface-variant: #e8f1e4;
  --color-surface-elevated: #ffffff;
  --color-border: #c4d4bc;
  --color-border-light: #e8f1e4;
  --color-border-dark: #5a6e52;
  --color-semantic-success: #0d622c;
  --color-semantic-success-light: #98d7af;
  --color-semantic-success-border: #75a687;
  --color-semantic-success-readable: #0d622c;
  --color-semantic-error: #841717;
  --color-semantic-error-light: #ef9999;
  --color-semantic-error-border: #b77777;
  --color-semantic-error-readable: #841717;
  --color-semantic-warning: #824704;
  --color-semantic-warning-light: #eec391;
  --color-semantic-warning-border: #b89670;
  --color-semantic-warning-readable: #824704;
  --color-semantic-info: #1a45a5;
  --color-semantic-info-light: #a6bff7;
  --color-semantic-info-border: #8098cd;
  --color-semantic-info-readable: #1a45a5;
  --color-primary-readable: #2c6119;
  --color-text-muted-readable: #5a6e52;
  --header-bg: #1b3a0e;
  --header-text: #ffffff;
  --header-link: #c9a830;
  --header-link-hover: #f0d060;
  --header-border: #2d5018;
  --footer-bg: #1b3a0e;
  --footer-text: #ffffff;
  --footer-link: #c9a830;
  --footer-link-hover: #f0d060;
  --footer-border: #2d5018;
  --nav-bg: #162e0b;
  --nav-text: #ffffff;
  --nav-link: #c9a830;
  --nav-link-hover: #f0d060;
  --nav-border: #244f13;
  --color-btn-primary-bg: #c22d27;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #9e2020;
  --color-btn-primary-border: #9e2020;
  --color-btn-secondary-bg: #e8f1e4;
  --color-btn-secondary-text: #1b3a0e;
  --color-btn-secondary-hover: #d5eecc;
  --color-btn-secondary-border: #a8d990;
  --font-family-heading: Playfair Display;
  --font-heading-weights: 400,700;
  --font-family-body: Inter;
  --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: #397E20;
  --color-primary-50: #CBEEBE;
  --color-primary-100: #C4ECB6;
  --color-primary-200: #AEE59A;
  --color-primary-300: #8DDA71;
  --color-primary-400: #5CCB34;
  --color-primary-500: #397E20;
  --color-primary-600: #2C6119;
  --color-primary-700: #1E4111;
  --color-primary-800: #112409;
  --color-primary-900: #040802;
  --color-primary-950: #000000;
  --color-accent: #D93E36;
  --color-accent-50: #FCEFEE;
  --color-accent-100: #FAE6E5;
  --color-accent-200: #F6D2D0;
  --color-accent-300: #EFB1AE;
  --color-accent-400: #E57B76;
  --color-accent-500: #D93E36;
  --color-accent-600: #B82B23;
  --color-accent-700: #8D211B;
  --color-accent-800: #671814;
  --color-accent-900: #3C0E0B;
  --color-accent-950: #270907;
  --color-background: #ffffff;
  --color-foreground: #1b3a0e;
  --color-text-heading: #1b3a0e;
  --color-text-body: #2d3a28;
  --color-text-muted: #5a6e52;
  --color-text-placeholder: #8a9e80;
  --color-text-disabled: #b5c4ae;
  --color-text-link: #2e6418;
  --color-text-link-hover: #1b3a0e;
  --color-surface: #f5f8f3;
  --color-surface-variant: #e8f1e4;
  --color-surface-elevated: #ffffff;
  --color-border: #c4d4bc;
  --color-border-light: #e8f1e4;
  --color-border-dark: #5a6e52;
  --color-semantic-success: #0d622c;
  --color-semantic-success-light: #98d7af;
  --color-semantic-success-border: #75a687;
  --color-semantic-success-readable: #0d622c;
  --color-semantic-error: #841717;
  --color-semantic-error-light: #ef9999;
  --color-semantic-error-border: #b77777;
  --color-semantic-error-readable: #841717;
  --color-semantic-warning: #824704;
  --color-semantic-warning-light: #eec391;
  --color-semantic-warning-border: #b89670;
  --color-semantic-warning-readable: #824704;
  --color-semantic-info: #1a45a5;
  --color-semantic-info-light: #a6bff7;
  --color-semantic-info-border: #8098cd;
  --color-semantic-info-readable: #1a45a5;
  --color-primary-readable: #2c6119;
  --color-text-muted-readable: #5a6e52;
  --header-bg: #1b3a0e;
  --header-text: #ffffff;
  --header-link: #c9a830;
  --header-link-hover: #f0d060;
  --header-border: #2d5018;
  --footer-bg: #1b3a0e;
  --footer-text: #ffffff;
  --footer-link: #c9a830;
  --footer-link-hover: #f0d060;
  --footer-border: #2d5018;
  --nav-bg: #162e0b;
  --nav-text: #ffffff;
  --nav-link: #c9a830;
  --nav-link-hover: #f0d060;
  --nav-border: #244f13;
  --color-btn-primary-bg: #c22d27;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #9e2020;
  --color-btn-primary-border: #9e2020;
  --color-btn-secondary-bg: #e8f1e4;
  --color-btn-secondary-text: #1b3a0e;
  --color-btn-secondary-hover: #d5eecc;
  --color-btn-secondary-border: #a8d990;
  --font-family-heading: Playfair Display;
  --font-heading-weights: 400,700;
  --font-family-body: Inter;
  --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;
}