/**
 * =========================================
 * FURNITURE PLUS INC - COLOR SYSTEM
 * =========================================
 * 
 * Primary: #c8ad80 (Warm Gold/Tan)
 * Secondary: #5b845a (Sage Green)
 * 
 * This file defines the complete color palette
 * for consistent theming across the application.
 */

:root {
  /* ===== PRIMARY COLORS ===== */
  --color-primary: #c8ad80;           /* Warm Gold - Main brand color */
  --color-primary-light: #d9c199;     /* Light Gold - Hover states, backgrounds */
  --color-primary-lighter: #ebe0ca;   /* Lightest Gold - Subtle backgrounds */
  --color-primary-dark: #b39a6b;      /* Dark Gold - Text, borders */
  --color-primary-darker: #9e8656;    /* Darker Gold - Strong emphasis */
  
  /* ===== SECONDARY COLORS ===== */
  --color-secondary: #5b845a;         /* Sage Green - Secondary brand color */
  --color-secondary-light: #7a9f79;   /* Light Sage - Accents */
  --color-secondary-lighter: #a4c4a3; /* Lightest Sage - Backgrounds */
  --color-secondary-dark: #4a6d49;    /* Dark Sage - Text, borders */
  --color-secondary-darker: #3a5639;  /* Darker Sage - Strong contrast */
  
  /* ===== ACCENT COLORS ===== */
  --color-accent-warm: #d4a574;       /* Warm accent - Calls to action */
  --color-accent-cool: #6b9b6a;       /* Cool accent - Info elements */
  --color-accent-earth: #8b7355;      /* Earth tone - Natural feel */
  --color-accent-terracotta: #c87d5f; /* Terracotta - Special highlights */
  
  /* ===== NEUTRAL PALETTE ===== */
  --color-white: #ffffff;
  --color-off-white: #fafaf8;         /* Soft white with warm tint */
  --color-cream: #f5f1eb;             /* Cream - Light backgrounds */
  --color-sand: #ede8e0;              /* Sand - Subtle dividers */
  --color-gray-100: #f7f6f4;
  --color-gray-200: #e8e6e1;
  --color-gray-300: #d1cdc5;
  --color-gray-400: #b8b3a9;
  --color-gray-500: #918c81;
  --color-gray-600: #6b6760;
  --color-gray-700: #4a4641;
  --color-gray-800: #2d2a26;
  --color-gray-900: #1a1816;
  --color-black: #0f0e0d;
  
  /* ===== SEMANTIC COLORS ===== */
  --color-success: #5b845a;           /* Using secondary green */
  --color-success-light: #7a9f79;
  --color-success-dark: #4a6d49;
  
  --color-warning: #d4a574;           /* Warm gold variant */
  --color-warning-light: #e4c19b;
  --color-warning-dark: #b38a59;
  
  --color-error: #c85f5f;             /* Muted red */
  --color-error-light: #d98080;
  --color-error-dark: #a54848;
  
  --color-info: #6b9b9f;              /* Teal complement */
  --color-info-light: #8fb4b7;
  --color-info-dark: #567e82;
  
  /* ===== TEXT COLORS ===== */
  --text-primary: #2d2a26;            /* Main text */
  --text-secondary: #6b6760;          /* Secondary text */
  --text-tertiary: #918c81;           /* Muted text */
  --text-inverse: #ffffff;            /* Text on dark backgrounds */
  --text-accent: #c8ad80;             /* Accent text */
  --text-link: #5b845a;               /* Links */
  --text-link-hover: #4a6d49;         /* Link hover */
  
  /* ===== BACKGROUND COLORS ===== */
  --bg-primary: #ffffff;
  --bg-secondary: #fafaf8;
  --bg-tertiary: #f5f1eb;
  --bg-accent: #ebe0ca;
  --bg-dark: #2d2a26;
  --bg-overlay: rgba(45, 42, 38, 0.9);
  
  /* ===== BORDER COLORS ===== */
  --border-light: #e8e6e1;
  --border-medium: #d1cdc5;
  --border-dark: #b8b3a9;
  --border-accent: #c8ad80;
  --border-secondary: #5b845a;
  
  /* ===== BUTTON COLORS ===== */
  --btn-primary-bg: #c8ad80;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #b39a6b;
  --btn-primary-active: #9e8656;
  
  --btn-secondary-bg: #5b845a;
  --btn-secondary-text: #ffffff;
  --btn-secondary-hover: #4a6d49;
  --btn-secondary-active: #3a5639;
  
  --btn-outline-border: #c8ad80;
  --btn-outline-text: #c8ad80;
  --btn-outline-hover-bg: #c8ad80;
  --btn-outline-hover-text: #ffffff;
  
  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 3px rgba(45, 42, 38, 0.1);
  --shadow-md: 0 4px 12px rgba(45, 42, 38, 0.12);
  --shadow-lg: 0 8px 24px rgba(45, 42, 38, 0.15);
  --shadow-xl: 0 12px 40px rgba(45, 42, 38, 0.18);
  --shadow-accent: 0 4px 16px rgba(200, 173, 128, 0.25);
  --shadow-secondary: 0 4px 16px rgba(91, 132, 90, 0.25);
  
  /* ===== GRADIENTS - REMOVED (Using solid colors instead) ===== */
  /* All gradients have been replaced with solid colors for simplicity */
  /* If you need gradients, use direct CSS: background: linear-gradient(...) */
  
  /* ===== LEGACY SUPPORT (for backward compatibility) ===== */
  --base: #c8ad80;
  --accent: #c8ad80;
  --global-color: #c8ad80;
  --coastal-navy: #c8ad80;
  --coastal-navy-dark: #9e8656;
  --coastal-blue: #5b845a;
  --coastal-light: #fafaf8;
  --coastal-sand: #f5f1eb;
  --ocean-text: #6b6760;
  --driftwood: #8b7355;
  --sea-glass: #7a9f79;
  --lighthouse-white: #ffffff;
  --coastal-mist: #e8e6e1;
  --sunset-coral: #c87d5f;
  --ink: #1a1816;
  
  /* ===== SPACING & SIZING ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-bounce: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== DARK MODE SUPPORT (optional) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Adjust colors for dark mode if needed */
    --bg-primary: #1a1816;
    --bg-secondary: #2d2a26;
    --bg-tertiary: #4a4641;
    --text-primary: #fafaf8;
    --text-secondary: #d1cdc5;
    --text-tertiary: #b8b3a9;
    --border-light: #4a4641;
    --border-medium: #6b6760;
    --border-dark: #918c81;
  }
}

/* ===== UTILITY CLASSES ===== */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }

/* ===== HOVER STATES ===== */
.hover-primary:hover { color: var(--color-primary-dark) !important; }
.hover-secondary:hover { color: var(--color-secondary-dark) !important; }
.hover-bg-primary:hover { background-color: var(--color-primary-dark) !important; }
.hover-bg-secondary:hover { background-color: var(--color-secondary-dark) !important; }