/* ============================================
   FRESH KITCHEN RECIPES - MASTER COLOR PALETTE

   ⚠️ SINGLE SOURCE OF TRUTH FOR ALL COLORS ⚠️

   This file contains ALL color definitions for the entire application.
   To change any color throughout the site, modify the hex values HERE ONLY.

   DO NOT add hardcoded colors anywhere else - always reference these CSS variables:
   - In CSS files: use var(--primary-600), var(--secondary), etc.
   - In Tailwind config: already configured to use these variables
   - In HTML: use Tailwind classes (bg-primary-600, text-primary-900, etc.)

   After changing colors here, rebuild Tailwind CSS:
   npm run build:css

   ============================================ */

:root {
  /* ============================================
     PLUM (Primary Brand Color)
     Use: Buttons, headers, navigation, primary UI
     Deep, sophisticated tone
     ============================================ */
  --primary-50: #F8F4F7;
  --primary-100: #F0E8EE;
  --primary-200: #DCC8D8;
  --primary-300: #BFA0BA;
  --primary-400: #9C7796;
  --primary-500: #7E5779;
  --primary-600: #5C3A5B;  /* PRIMARY BRAND COLOR ⭐ */
  --primary-700: #4A2F4A;
  --primary-800: #382438;
  --primary-900: #261826;

  /* ============================================
     SECONDARY (Warm Off-White)
     Use: Backgrounds, cards, light sections
     Soft, warm neutral to complement plum
     ============================================ */
  --secondary: #FFFDF8;
  --secondary-light: #FFFFFE;
  --secondary-dark: #F5F2EB;

  /* Legacy navy variables (mapped to new primary for compatibility) */
  --navy-50: var(--primary-50);
  --navy-100: var(--primary-100);
  --navy-200: var(--primary-200);
  --navy-300: var(--primary-300);
  --navy-400: var(--primary-400);
  --navy-500: var(--primary-500);
  --navy-600: var(--primary-600);
  --navy-700: var(--primary-700);
  --navy-800: var(--primary-800);
  --navy-900: var(--primary-900);

  /* ============================================
     TEAL (Success/Positive)
     Use: Success messages, confirmations, save buttons
     ============================================ */
  --teal: #00ACC1;
  --teal-light: #26C6DA;
  --teal-dark: #00838F;
  --teal-hover: #0097A7;

  /* ============================================
     ORANGE (Featured/Attention)
     Use: Featured recipes, Recipe of Day, warnings
     ============================================ */
  --orange: #FF6B35;
  --orange-light: #FF8A65;
  --orange-dark: #E85A2A;
  --orange-hover: #F4511E;

  /* ============================================
     BLUE (Information)
     Use: Info messages, secondary buttons, links
     ============================================ */
  --blue: #0288D1;
  --blue-light: #03A9F4;
  --blue-dark: #0277BD;
  --blue-hover: #01579B;

  /* ============================================
     PURPLE (Premium)
     Use: Premium features, AI content, special badges
     ============================================ */
  --purple: #7B1FA2;
  --purple-light: #9C27B0;
  --purple-dark: #6A1B9A;
  --purple-hover: #4A148C;

  /* ============================================
     SUCCESS (Green)
     ============================================ */
  --success: #22C55E;
  --success-light: #DCFCE7;
  --success-dark: #15803D;
  --success-text: #166534;

  /* ============================================
     WARNING (Amber)
     ============================================ */
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --warning-dark: #B45309;
  --warning-text: #92400E;

  /* ============================================
     ERROR (Red)
     ============================================ */
  --error: #EF4444;
  --error-light: #FEE2E2;
  --error-dark: #B91C1C;
  --error-text: #991B1B;

  /* ============================================
     INFO (Blue)
     ============================================ */
  --info: #3B82F6;
  --info-light: #DBEAFE;
  --info-dark: #1D4ED8;
  --info-text: #1E40AF;

  /* ============================================
     NEUTRAL (Grays)
     ============================================ */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D4;
  --gray-400: #A3A3A3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  /* ============================================
     RECIPE CATEGORIES
     ============================================ */
  --breakfast: #FFB84D;
  --lunch: #4CAF50;
  --dinner: #FF6B6B;
  --appetizers: #9C27B0;
  --desserts: #FF4081;
  --snacks: #FFC107;
  --beverages: #00BCD4;

  /* ============================================
     DIETARY TAGS
     ============================================ */
  --vegetarian: #8BC34A;
  --vegan: #4CAF50;
  --gluten-free: #FFC107;
  --keto: #673AB7;
  --paleo: #795548;
  --dairy-free: #03A9F4;

  /* ============================================
     COMMON ALIASES (for convenience)
     ============================================ */
  --primary: #B36A5E;        /* Terracotta - primary brand color */
  --primary-hover: #955648;  /* Darker terracotta for hover states */
  --text: #171717;           /* Same as gray-900 */
  --text-muted: #525252;     /* Same as gray-600 */
  --border: #E5E5E5;         /* Same as gray-200 */
  --background: #FFFFFF;
  --background-soft: #F3EEE8; /* Cream secondary color */

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-soft: 0 2px 8px rgba(92, 52, 44, 0.08);
  --shadow-medium: 0 4px 12px rgba(92, 52, 44, 0.12);
  --shadow-strong: 0 8px 24px rgba(92, 52, 44, 0.16);
  --shadow-primary: 0 4px 14px rgba(179, 106, 94, 0.25);
  --shadow-navy: var(--shadow-primary); /* Legacy alias */

  /* ============================================
     DARK MODE - Accent Colors for gradients/text
     Used in visual-enhancements.css
     ============================================ */
  --primary-accent-light: #93c5fd;
  --primary-accent-medium: #60a5fa;
  --primary-accent-dark: #3b82f6;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Background colors */
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-navy { background-color: var(--primary-600); }
.bg-teal { background-color: var(--teal); }
.bg-orange { background-color: var(--orange); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-error { background-color: var(--error); }
.bg-info { background-color: var(--info); }

/* Text colors */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-navy { color: var(--primary-600); }
.text-teal { color: var(--teal); }
.text-orange { color: var(--orange); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }
.text-muted { color: var(--text-muted); }

/* Border colors */
.border-primary { border-color: var(--primary); }
.border-secondary { border-color: var(--secondary); }
.border-navy { border-color: var(--primary-600); }
.border-teal { border-color: var(--teal); }
.border-orange { border-color: var(--orange); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-error { border-color: var(--error); }
.border-info { border-color: var(--info); }