:root {
  /* White */
  --color-white: #ffffff;

  /* Brand Neutrals */
  --color-cream: #EEE5E0;
  --color-cream-dark: #e0d5cf;
  --color-cream-light: #f5f0ec;

  /* Black */
  --color-black: #000000;

  /* Primary Colors - Main Brown */
  --color-primary: #362821;
  --color-primary-dark: #2a1f19;
  --color-primary-light: #4d3a31;

  /* Secondary Colors - Olive Green */
  --color-secondary: #50543d;
  --color-secondary-dark: #3f422f;
  --color-secondary-light: #676b4f;

  /* Accent Colors - Dusty Rose/Taupe */
  --color-accent: #B99D90;
  --color-accent-dark: #a68a7c;
  --color-accent-light: #cab1a5;

  /* Success */
  --color-success: #10b981;
  --color-success-dark: #059669;
  --color-success-light: #34d399;

  /* Warning */
  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;
  --color-warning-light: #fbbf24;

  /* Error */
  --color-error: #ef4444;
  --color-error-dark: #dc2626;
  --color-error-light: #f87171;

  /* Info */
  --color-info: #06b6d4;
  --color-info-dark: #0891b2;
  --color-info-light: #22d3ee;
}

:root {
  scrollbar-width: thin;
  scrollbar-color: rgba(185, 157, 144, 0.35) transparent;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(185, 157, 144, 0.35);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(185, 157, 144, 0.6);
}