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

:root {
  --color-primary: #E3EDE6;
  --color-primary-50: #FFFFFF;
  --color-primary-100: #FFFFFF;
  --color-primary-200: #FFFFFF;
  --color-primary-300: #FFFFFF;
  --color-primary-400: #FFFFFF;
  --color-primary-500: #E3EDE6;
  --color-primary-600: #B7D1BF;
  --color-primary-700: #8CB598;
  --color-primary-800: #619872;
  --color-primary-900: #466D51;
  --color-primary-950: #385741;
  --color-accent: #10B77F;
  --color-accent-50: #C7FAE9;
  --color-accent-100: #BDF9E5;
  --color-accent-200: #A1F7DA;
  --color-accent-300: #77F3CA;
  --color-accent-400: #35EDB0;
  --color-accent-500: #10B77F;
  --color-accent-600: #0D9165;
  --color-accent-700: #096C4B;
  --color-accent-800: #06422E;
  --color-accent-900: #021C14;
  --color-accent-950: #010907;
  --color-background: #fafdf7;
  --color-foreground: #14532d;
  --color-text-heading: #14532d;
  --color-text-body: #000000;
  --color-text-muted: #4d7c0f;
  --color-text-placeholder: #14532d;
  --color-text-disabled: #14532d;
  --color-text-link: #15803d;
  --color-text-link-hover: #14532d;
  --color-surface: #ffffff;
  --color-surface-variant: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-border: #4ca5c2;
  --color-border-light: #4ca5c2;
  --color-border-dark: #4ca5c2;
  --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: #7b4f06;
  --color-semantic-warning-light: #f9c66f;
  --color-semantic-warning-border: #aa8d5e;
  --color-semantic-warning-readable: #7b4f06;
  --color-semantic-info: #234e94;
  --color-semantic-info-light: #a3c4fb;
  --color-semantic-info-border: #7e97c0;
  --color-semantic-info-readable: #234e94;
  --color-primary-readable: #657369;
  --color-text-muted-readable: #4d7c0f;
  --header-bg: #f1f9f4;
  --header-text: #3a5f26;
  --header-link: #3a5f26;
  --header-link-hover: #4ca5c2;
  --header-border: #14532d;
  --footer-bg: #bfcfc3;
  --footer-text: #14532d;
  --footer-link: #3a5f26;
  --footer-link-hover: #4ca5c2;
  --footer-border: #166534;
  --nav-bg: #166534;
  --nav-text: #d1fae5;
  --nav-link: #4ade80;
  --nav-link-hover: #ffffff;
  --nav-border: #15803d;
  --color-btn-primary-bg: #15803d;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #166534;
  --color-btn-primary-border: #15803d;
  --color-btn-secondary-bg: #f0fdf4;
  --color-btn-secondary-text: #166534;
  --color-btn-secondary-hover: #dcfce7;
  --color-btn-secondary-border: #bbf7d0;
  --font-family-heading: Merriweather;
  --font-heading-weights: 400,700;
  --font-family-body: Lato;
  --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: #E3EDE6;
  --color-primary-50: #FFFFFF;
  --color-primary-100: #FFFFFF;
  --color-primary-200: #FFFFFF;
  --color-primary-300: #FFFFFF;
  --color-primary-400: #FFFFFF;
  --color-primary-500: #E3EDE6;
  --color-primary-600: #B7D1BF;
  --color-primary-700: #8CB598;
  --color-primary-800: #619872;
  --color-primary-900: #466D51;
  --color-primary-950: #385741;
  --color-accent: #10B77F;
  --color-accent-50: #C7FAE9;
  --color-accent-100: #BDF9E5;
  --color-accent-200: #A1F7DA;
  --color-accent-300: #77F3CA;
  --color-accent-400: #35EDB0;
  --color-accent-500: #10B77F;
  --color-accent-600: #0D9165;
  --color-accent-700: #096C4B;
  --color-accent-800: #06422E;
  --color-accent-900: #021C14;
  --color-accent-950: #010907;
  --color-background: #fafdf7;
  --color-foreground: #14532d;
  --color-text-heading: #14532d;
  --color-text-body: #000000;
  --color-text-muted: #4d7c0f;
  --color-text-placeholder: #14532d;
  --color-text-disabled: #14532d;
  --color-text-link: #15803d;
  --color-text-link-hover: #14532d;
  --color-surface: #ffffff;
  --color-surface-variant: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-border: #4ca5c2;
  --color-border-light: #4ca5c2;
  --color-border-dark: #4ca5c2;
  --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: #7b4f06;
  --color-semantic-warning-light: #f9c66f;
  --color-semantic-warning-border: #aa8d5e;
  --color-semantic-warning-readable: #7b4f06;
  --color-semantic-info: #234e94;
  --color-semantic-info-light: #a3c4fb;
  --color-semantic-info-border: #7e97c0;
  --color-semantic-info-readable: #234e94;
  --color-primary-readable: #657369;
  --color-text-muted-readable: #4d7c0f;
  --header-bg: #f1f9f4;
  --header-text: #3a5f26;
  --header-link: #3a5f26;
  --header-link-hover: #4ca5c2;
  --header-border: #14532d;
  --footer-bg: #bfcfc3;
  --footer-text: #14532d;
  --footer-link: #3a5f26;
  --footer-link-hover: #4ca5c2;
  --footer-border: #166534;
  --nav-bg: #166534;
  --nav-text: #d1fae5;
  --nav-link: #4ade80;
  --nav-link-hover: #ffffff;
  --nav-border: #15803d;
  --color-btn-primary-bg: #15803d;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #166534;
  --color-btn-primary-border: #15803d;
  --color-btn-secondary-bg: #f0fdf4;
  --color-btn-secondary-text: #166534;
  --color-btn-secondary-hover: #dcfce7;
  --color-btn-secondary-border: #bbf7d0;
  --font-family-heading: Merriweather;
  --font-heading-weights: 400,700;
  --font-family-body: Lato;
  --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;
}