/* K-Food Delight Theme Color Enhancement */
:root {
  --color-primary: #ff7f50;
  --color-primary-dark: #ff6b6b;
  --color-accent: #ffb75e;
  --color-text: #2d3436;
  --color-text-light: #636e72;
  --color-success: #4caf50;
  --color-error: #f44336;
  --color-background: #fff9f5;
  --color-surface: #ffffff;
  --color-border: rgba(255, 127, 80, 0.15);
  --shadow-soft: 0 4px 20px rgba(255, 127, 80, 0.08);
  --shadow-hover: 0 8px 30px rgba(255, 127, 80, 0.15);
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent)
  );
  --gradient-surface: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.9)
  );
}

/* Button Styles */
.btn-primary {
  background: var(--gradient-primary);
  border: none;
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(
    135deg,
    var(--color-primary-dark),
    var(--color-accent)
  );
  box-shadow: var(--shadow-hover);
}

.btn-secondary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background: rgba(255, 127, 80, 0.05);
}

/* Form Controls */
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(255, 127, 80, 0.1);
}

/* Modal Headers */
.modal-header {
  background: var(--gradient-primary);
  color: white;
}

/* Cards and Surfaces */
.card,
.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

/* Status Indicators */
.status-badge.success {
  background: var(--color-success);
  color: white;
}

.status-badge.error {
  background: var(--color-error);
  color: white;
}

/* Notifications */
.notification.success {
  background: linear-gradient(145deg, var(--color-success), #45a049);
}

.notification.error {
  background: linear-gradient(145deg, var(--color-error), #e53935);
}

/* Active States */
.nav-item.active {
  background: rgba(255, 127, 80, 0.1);
  color: var(--color-primary);
}

/* Interactive Elements */
.interactive-element:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
}