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

:root {
  --color-primary: #B65B3A;
  --color-primary-50: #F6E9E4;
  --color-primary-100: #F4E2DC;
  --color-primary-200: #EDCFC5;
  --color-primary-300: #E2B3A2;
  --color-primary-400: #D28A70;
  --color-primary-500: #B65B3A;
  --color-primary-600: #93492F;
  --color-primary-700: #703823;
  --color-primary-800: #4E2718;
  --color-primary-900: #2B150D;
  --color-primary-950: #170C07;
  --color-accent: #D12980;
  --color-accent-50: #FAE5F0;
  --color-accent-100: #F8DDEB;
  --color-accent-200: #F3C3DC;
  --color-accent-300: #ECA1C8;
  --color-accent-400: #E26AA8;
  --color-accent-500: #D12980;
  --color-accent-600: #AA2268;
  --color-accent-700: #80194E;
  --color-accent-800: #591237;
  --color-accent-900: #330A1F;
  --color-accent-950: #1E0612;
  --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: #ad1d65;
  --color-text-link-hover: #8b154f;
  --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: #93492f;
  --color-text-muted-readable: #7d4a3c;
  --header-bg: #fff7f0;
  --header-text: #3d1610;
  --header-link: #ad1d65;
  --header-link-hover: #8b154f;
  --header-border: #f0d1c1;
  --footer-bg: #3d1610;
  --footer-text: #f7e6dc;
  --footer-link: #ff75c0;
  --footer-link-hover: #ffd1e9;
  --footer-border: #260c08;
  --nav-bg: #fff3ed;
  --nav-text: #3d1610;
  --nav-link: #ad1d65;
  --nav-link-hover: #8b154f;
  --nav-border: #f0d1c1;
  --color-btn-primary-bg: #ad1d65;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #8b154f;
  --color-btn-primary-border: #ad1d65;
  --color-btn-secondary-bg: #ffffff;
  --color-btn-secondary-text: #522117;
  --color-btn-secondary-hover: #f9e6dc;
  --color-btn-secondary-border: #e6d6cf;
  --font-family-heading: Lato;
  --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: #B65B3A;
  --color-primary-50: #F6E9E4;
  --color-primary-100: #F4E2DC;
  --color-primary-200: #EDCFC5;
  --color-primary-300: #E2B3A2;
  --color-primary-400: #D28A70;
  --color-primary-500: #B65B3A;
  --color-primary-600: #93492F;
  --color-primary-700: #703823;
  --color-primary-800: #4E2718;
  --color-primary-900: #2B150D;
  --color-primary-950: #170C07;
  --color-accent: #D12980;
  --color-accent-50: #FAE5F0;
  --color-accent-100: #F8DDEB;
  --color-accent-200: #F3C3DC;
  --color-accent-300: #ECA1C8;
  --color-accent-400: #E26AA8;
  --color-accent-500: #D12980;
  --color-accent-600: #AA2268;
  --color-accent-700: #80194E;
  --color-accent-800: #591237;
  --color-accent-900: #330A1F;
  --color-accent-950: #1E0612;
  --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: #ad1d65;
  --color-text-link-hover: #8b154f;
  --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: #93492f;
  --color-text-muted-readable: #7d4a3c;
  --header-bg: #fff7f0;
  --header-text: #3d1610;
  --header-link: #ad1d65;
  --header-link-hover: #8b154f;
  --header-border: #f0d1c1;
  --footer-bg: #3d1610;
  --footer-text: #f7e6dc;
  --footer-link: #ff75c0;
  --footer-link-hover: #ffd1e9;
  --footer-border: #260c08;
  --nav-bg: #fff3ed;
  --nav-text: #3d1610;
  --nav-link: #ad1d65;
  --nav-link-hover: #8b154f;
  --nav-border: #f0d1c1;
  --color-btn-primary-bg: #ad1d65;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #8b154f;
  --color-btn-primary-border: #ad1d65;
  --color-btn-secondary-bg: #ffffff;
  --color-btn-secondary-text: #522117;
  --color-btn-secondary-hover: #f9e6dc;
  --color-btn-secondary-border: #e6d6cf;
  --font-family-heading: Lato;
  --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;
}