/* colors.css - Define all colors as CSS variables */
:root {
  /* Primary colors */
  --color-primary: #ff9900; /* Orange - used for buttons */
  --color-primary-dark: #f08c00; /* Darker orange - used for button hover */

  /* Background colors */
  --color-background-main: #ffffff; /* Main background */
  --color-background-secondary: #f9f9f9; /* Secondary background - used for cards */
  --color-background-tertiary: #f5f5f5; /* Tertiary background - used for product showcase */

  /* Text colors */
  --color-text-black: #000000;
  --color-text-primary: #333333; /* Primary text */
  --color-text-secondary: #666666; /* Secondary text */
  --color-text-tertiary: #888888; /* Tertiary text */
  --color-text-muted: #999999; /* Muted text */

  /* Border colors */
  --color-border: #eaeaea; /* Border color */

  /* Accent colors */
  --color-accent: #ff9900; /* Star icon */
  --color-card-background: #fdf9f8;

  /* UI Elements */
  --color-button-bg: #ff9900; /* Button background */
  --color-button-text: #000000; /* Button text */
  --color-counter-bg: #000000; /* Counter background */
  --color-counter-text: #ffffff; /* Counter text */
}