/**
 * LWC (ListWithClever) Brand Theme
 * 
 * This file defines the core color palette and common theme variables
 * for the ListWithClever brand. Include this CSS file in templates
 * to ensure consistent branding across the application.
 * 
 * Usage:
 *   {% load static %}
 *   <link href="{% static 'css/lwc-theme.css' %}" rel="stylesheet">
 */

:root {
  /* Primary Brand Colors */
  --lwc-blue: #0075EB;           /* Primary blue - main brand color */
  --lwc-green: #0EC18F;          /* Primary green - accent/success color */
  
  /* Neutral Colors */
  --lwc-white: #FFFFFF;          /* Pure white */
  --lwc-black: #131A22;          /* Text black - primary text color */
  --lwc-gray: #C9D3E1;           /* Gray - borders, dividers, muted elements */
  --lwc-gray-text: #5a6775;      /* Dark gray - readable muted text on white */
  --lwc-off-white: #F7F9FA;      /* Off-white - backgrounds, cards */
  
  /* Tints/Variants */
  --lwc-light-blue: #E8F4FF;     /* Light blue - highlights, selected states */
  --lwc-blue-hover: #0066cc;     /* Darker blue for hover states */
  --lwc-green-hover: #0ba87a;    /* Darker green for hover states */
  --lwc-gray-dark: #a8b5c4;      /* Darker gray for hover states */
  
  /* Warning/Difference Colors */
  --lwc-red: #E53935;            /* Red - warnings, differences, alerts */
  --lwc-light-red: #FFEBEE;      /* Light red - background for differences */
  --lwc-red-border: #FFCDD2;     /* Red border - subtle red for borders */
  
  /* Semantic Colors (mapped from brand colors) */
  --lwc-primary: var(--lwc-blue);
  --lwc-success: var(--lwc-green);
  --lwc-warning: var(--lwc-red);
  --lwc-background: var(--lwc-off-white);
  --lwc-text: var(--lwc-black);
  --lwc-text-muted: var(--lwc-gray-text);  /* Darker gray for readable muted text */
  --lwc-border: var(--lwc-gray);
  
  /* Shadows */
  --lwc-shadow-sm: 0 2px 4px rgba(19, 26, 34, 0.08);
  --lwc-shadow-md: 0 4px 12px rgba(19, 26, 34, 0.12);
  --lwc-shadow-lg: 0 8px 25px rgba(19, 26, 34, 0.15);
  --lwc-shadow-blue: 0 4px 12px rgba(0, 117, 235, 0.3);
  --lwc-shadow-green: 0 4px 12px rgba(14, 193, 143, 0.3);
  
  /* Gradients */
  --lwc-gradient-primary: linear-gradient(135deg, var(--lwc-blue) 0%, #4096cf 50%, var(--lwc-white) 100%);
  --lwc-gradient-blue: linear-gradient(135deg, var(--lwc-blue) 0%, #4096cf 100%);
  --lwc-gradient-green: linear-gradient(135deg, var(--lwc-green) 0%, #3ed6a7 100%);
  
  /* Focus states */
  --lwc-focus-blue: 0 0 0 3px rgba(0, 117, 235, 0.15);
  --lwc-focus-green: 0 0 0 3px rgba(14, 193, 143, 0.2);
  
  /* Border radius */
  --lwc-radius-sm: 0.35rem;
  --lwc-radius-md: 0.5rem;
  --lwc-radius-lg: 0.75rem;
  --lwc-radius-xl: 1rem;
  --lwc-radius-full: 50%;
  
  /* Transitions */
  --lwc-transition-fast: 0.15s ease;
  --lwc-transition-normal: 0.2s ease;
  --lwc-transition-slow: 0.3s ease;
}

/* Common utility classes */
.lwc-text-primary { color: var(--lwc-blue); }
.lwc-text-success { color: var(--lwc-green); }
.lwc-text-muted { color: var(--lwc-gray); }
.lwc-text-dark { color: var(--lwc-black); }

.lwc-bg-primary { background-color: var(--lwc-blue); }
.lwc-bg-success { background-color: var(--lwc-green); }
.lwc-bg-light { background-color: var(--lwc-off-white); }
.lwc-bg-highlight { background-color: var(--lwc-light-blue); }

.lwc-border { border-color: var(--lwc-gray); }
.lwc-border-primary { border-color: var(--lwc-blue); }
.lwc-border-success { border-color: var(--lwc-green); }

/* Common button styles */
.lwc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--lwc-radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--lwc-transition-normal);
}

.lwc-btn-primary {
  background: var(--lwc-blue);
  color: var(--lwc-white);
}

.lwc-btn-primary:hover {
  background: var(--lwc-blue-hover);
  transform: translateY(-1px);
  box-shadow: var(--lwc-shadow-blue);
}

.lwc-btn-success {
  background: var(--lwc-green);
  color: var(--lwc-white);
}

.lwc-btn-success:hover {
  background: var(--lwc-green-hover);
  transform: translateY(-1px);
  box-shadow: var(--lwc-shadow-green);
}

.lwc-btn-outline {
  background: var(--lwc-white);
  color: var(--lwc-black);
  border: 2px solid var(--lwc-gray);
}

.lwc-btn-outline:hover {
  background: var(--lwc-off-white);
  border-color: var(--lwc-gray-dark);
}

/* Common card styles */
.lwc-card {
  background: var(--lwc-white);
  border-radius: var(--lwc-radius-lg);
  box-shadow: var(--lwc-shadow-lg);
  overflow: hidden;
}

/* Form input focus states using LWC colors */
.lwc-input:focus,
.lwc-select:focus {
  border-color: var(--lwc-blue);
  box-shadow: var(--lwc-focus-blue);
  outline: none;
}