@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: #787878;
  --color-primary-50: #EDEDED;
  --color-primary-100: #E8E8E8;
  --color-primary-200: #D9D9D9;
  --color-primary-300: #C2C2C2;
  --color-primary-400: #A1A1A1;
  --color-primary-500: #787878;
  --color-primary-600: #616161;
  --color-primary-700: #4A4A4A;
  --color-primary-800: #333333;
  --color-primary-900: #1C1C1C;
  --color-primary-950: #0F0F0F;
  --color-accent: #FAEEDB;
  --color-accent-50: #FFFFFF;
  --color-accent-100: #FFFFFF;
  --color-accent-200: #FFFFFF;
  --color-accent-300: #FFFFFF;
  --color-accent-400: #FFFFFF;
  --color-accent-500: #FAEEDB;
  --color-accent-600: #F2D19C;
  --color-accent-700: #E9B35D;
  --color-accent-800: #E0961F;
  --color-accent-900: #A26C16;
  --color-accent-950: #825712;
  --color-background: #fff9f5;
  --color-foreground: #3d1610;
  --color-text-heading: #3d1610;
  --color-text-body: #522117;
  --color-text-muted: #7d4a3c;
  --color-text-placeholder: #c8a79b;
  --color-text-disabled: #e6d6cf;
  --color-text-link: #6e6e6e;
  --color-text-link-hover: #545454;
  --color-surface: #fff3ed;
  --color-surface-variant: #f9e6dc;
  --color-surface-elevated: #ffffff;
  --color-border: #f0d1c1;
  --color-border-light: #f7e6dc;
  --color-border-dark: #cf8263;
  --color-semantic-success: #41622e;
  --color-semantic-success-light: #bfd7b1;
  --color-semantic-success-border: #93a688;
  --color-semantic-success-readable: #41622e;
  --color-semantic-error: #922f2f;
  --color-semantic-error-light: #eeb8b8;
  --color-semantic-error-border: #c48f8f;
  --color-semantic-error-readable: #922f2f;
  --color-semantic-warning: #714f15;
  --color-semantic-warning-light: #eec581;
  --color-semantic-warning-border: #a38d68;
  --color-semantic-warning-readable: #714f15;
  --color-semantic-info: #344e7d;
  --color-semantic-info-light: #afc0de;
  --color-semantic-info-border: #8b9ab5;
  --color-semantic-info-readable: #344e7d;
  --color-primary-readable: #616161;
  --color-text-muted-readable: #7d4a3c;
  --header-bg: #fff7f0;
  --header-text: #3d1610;
  --header-link: #5c5c5c;
  --header-link-hover: #8f8f8f;
  --header-border: #f0d1c1;
  --footer-bg: #3d1610;
  --footer-text: #f7e6dc;
  --footer-link: #ffffff;
  --footer-link-hover: #b3b3b3;
  --footer-border: #260c08;
  --nav-bg: #fff3ed;
  --nav-text: #3d1610;
  --nav-link: #ffffff;
  --nav-link-hover: #cccccc;
  --nav-border: #f0d1c1;
  --color-btn-primary-bg: #343a40;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #4d5760;
  --color-btn-primary-border: #6b737b;
  --color-btn-secondary-bg: #ffffff;
  --color-btn-secondary-text: #522117;
  --color-btn-secondary-hover: #f9e6dc;
  --color-btn-secondary-border: #e6d6cf;
  --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: #787878;
  --color-primary-50: #EDEDED;
  --color-primary-100: #E8E8E8;
  --color-primary-200: #D9D9D9;
  --color-primary-300: #C2C2C2;
  --color-primary-400: #A1A1A1;
  --color-primary-500: #787878;
  --color-primary-600: #616161;
  --color-primary-700: #4A4A4A;
  --color-primary-800: #333333;
  --color-primary-900: #1C1C1C;
  --color-primary-950: #0F0F0F;
  --color-accent: #FAEEDB;
  --color-accent-50: #FFFFFF;
  --color-accent-100: #FFFFFF;
  --color-accent-200: #FFFFFF;
  --color-accent-300: #FFFFFF;
  --color-accent-400: #FFFFFF;
  --color-accent-500: #FAEEDB;
  --color-accent-600: #F2D19C;
  --color-accent-700: #E9B35D;
  --color-accent-800: #E0961F;
  --color-accent-900: #A26C16;
  --color-accent-950: #825712;
  --color-background: #fff9f5;
  --color-foreground: #3d1610;
  --color-text-heading: #3d1610;
  --color-text-body: #522117;
  --color-text-muted: #7d4a3c;
  --color-text-placeholder: #c8a79b;
  --color-text-disabled: #e6d6cf;
  --color-text-link: #6e6e6e;
  --color-text-link-hover: #545454;
  --color-surface: #fff3ed;
  --color-surface-variant: #f9e6dc;
  --color-surface-elevated: #ffffff;
  --color-border: #f0d1c1;
  --color-border-light: #f7e6dc;
  --color-border-dark: #cf8263;
  --color-semantic-success: #41622e;
  --color-semantic-success-light: #bfd7b1;
  --color-semantic-success-border: #93a688;
  --color-semantic-success-readable: #41622e;
  --color-semantic-error: #922f2f;
  --color-semantic-error-light: #eeb8b8;
  --color-semantic-error-border: #c48f8f;
  --color-semantic-error-readable: #922f2f;
  --color-semantic-warning: #714f15;
  --color-semantic-warning-light: #eec581;
  --color-semantic-warning-border: #a38d68;
  --color-semantic-warning-readable: #714f15;
  --color-semantic-info: #344e7d;
  --color-semantic-info-light: #afc0de;
  --color-semantic-info-border: #8b9ab5;
  --color-semantic-info-readable: #344e7d;
  --color-primary-readable: #616161;
  --color-text-muted-readable: #7d4a3c;
  --header-bg: #fff7f0;
  --header-text: #3d1610;
  --header-link: #5c5c5c;
  --header-link-hover: #8f8f8f;
  --header-border: #f0d1c1;
  --footer-bg: #3d1610;
  --footer-text: #f7e6dc;
  --footer-link: #ffffff;
  --footer-link-hover: #b3b3b3;
  --footer-border: #260c08;
  --nav-bg: #fff3ed;
  --nav-text: #3d1610;
  --nav-link: #ffffff;
  --nav-link-hover: #cccccc;
  --nav-border: #f0d1c1;
  --color-btn-primary-bg: #343a40;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #4d5760;
  --color-btn-primary-border: #6b737b;
  --color-btn-secondary-bg: #ffffff;
  --color-btn-secondary-text: #522117;
  --color-btn-secondary-hover: #f9e6dc;
  --color-btn-secondary-border: #e6d6cf;
  --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;
}