/**
 * Yalla Menu – Official Brand Colors
 * Website & Digital Menu UI Guidelines
 */

:root {
  /* Primary Brand Colors */
  --golden-yellow: #F5B400;
  --deep-black: #111111;
  --warm-beige: #E6D3BE;
  --white: #FFFFFF;
  
  /* Text Colors */
  --text-primary: #111111;
  --text-secondary: #444444;
  --text-muted: #7A6A5A;
  
  /* Button Colors */
  --btn-primary-bg: #F5B400;
  --btn-primary-text: #111111;
  --btn-secondary-bg: #111111;
  --btn-secondary-text: #FFFFFF;
  --btn-outline-border: #F5B400;
  
  /* Categories & Filters */
  --category-active: #F5B400;
  --category-inactive-bg: #FFFFFF;
  --category-inactive-border: #D6C3AF;
  
  /* Prices & Numbers */
  --price-main: #111111;
  --price-highlight: #C98A3A;
  
  /* System States */
  --state-success: #6FAF3A;
  --state-warning: #F5B400;
  --state-error: #C83A2A;
}

/* ========================================
   BACKGROUND UTILITIES
   ======================================== */
.bg-golden-yellow { background-color: var(--golden-yellow); }
.bg-deep-black { background-color: var(--deep-black); }
.bg-warm-beige { background-color: var(--warm-beige); }
.bg-white { background-color: var(--white); }

/* ========================================
   TEXT COLOR UTILITIES
   ======================================== */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-golden { color: var(--golden-yellow); }
.text-white { color: var(--white); }

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
}

.btn-secondary:hover {
  opacity: 0.9;
}

.btn-outline {
  background-color: transparent;
  color: var(--btn-outline-border);
  border: 2px solid var(--btn-outline-border);
  padding: 12px 24px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-outline:hover {
  background-color: var(--btn-outline-border);
  color: var(--deep-black);
}

/* ========================================
   CATEGORY & FILTER STYLES
   ======================================== */
.category-active {
  background-color: var(--category-active);
  color: var(--deep-black);
  border: 2px solid var(--category-active);
  padding: 8px 16px;
  font-weight: 600;
}

.category-inactive {
  background-color: var(--category-inactive-bg);
  color: var(--text-secondary);
  border: 2px solid var(--category-inactive-border);
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.category-inactive:hover {
  border-color: var(--golden-yellow);
}

/* ========================================
   PRICE STYLES
   ======================================== */
.price-main {
  color: var(--price-main);
  font-weight: 700;
}

.price-highlight {
  color: var(--price-highlight);
  font-weight: 700;
}

/* ========================================
   SYSTEM STATES
   ======================================== */
.state-success {
  color: var(--state-success);
}

.state-warning {
  color: var(--state-warning);
}

.state-error {
  color: var(--state-error);
}

.alert-success {
  background-color: var(--state-success);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 4px;
}

.alert-warning {
  background-color: var(--state-warning);
  color: var(--deep-black);
  padding: 12px 16px;
  border-radius: 4px;
}

.alert-error {
  background-color: var(--state-error);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 4px;
}

/* ========================================
   BORDER UTILITIES
   ======================================== */
.border-golden { border-color: var(--golden-yellow); }
.border-black { border-color: var(--deep-black); }
.border-beige { border-color: var(--warm-beige); }
.border-inactive { border-color: var(--category-inactive-border); }