/* =============================================================================
   Elle Theme Override for Multitenant Website Builder
   Consistent with chattingwithstyle.com design system
   ============================================================================= */

:root {
  /* Background Palette - Warm Navy (from Elle's site) */
  --color-bg-primary: #0d1421;
  --color-bg-secondary: #141e2b;
  --color-bg-tertiary: #1a2836;
  --color-bg-elevated: #213040;
  --color-bg-hover: #2a3d4f;

  /* Primary Accent: Gold Spectrum */
  --color-primary: #f0c14b;
  --color-primary-dark: #b8860b;
  --color-primary-light: #ffe082;
  --color-accent: #f0c14b;
  --color-accent-muted: rgba(240, 193, 75, 0.15);
  --color-accent-glow: rgba(240, 193, 75, 0.4);

  /* Secondary Accents */
  --color-secondary: #b0b8c4;
  --color-success: #50c878;
  --color-danger: #e85d5d;
  --color-warning: #f5d76e;
  --color-info: #4da6d9;

  /* Grays - adapted for dark theme */
  --color-gray-50: #f5f5f8;
  --color-gray-100: #e8e8ed;
  --color-gray-200: #b0b8c4;
  --color-gray-300: #7a8594;
  --color-gray-400: #505a68;
  --color-gray-500: #3d4a5c;
  --color-gray-600: #2a3d4f;
  --color-gray-700: #213040;
  --color-gray-800: #1a2836;
  --color-gray-900: #0d1421;

  /* Text colors */
  --color-text-primary: #f5f5f8;
  --color-text-secondary: #b0b8c4;
  --color-text-muted: #7a8594;

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);
  --color-border-accent: rgba(240, 193, 75, 0.3);

  /* Typography - matching Elle's site */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Shadows - darker for dark theme */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --shadow-gold: 0 0 20px rgba(240, 193, 75, 0.2);
}

/* =============================================================================
   Base Overrides for Dark Theme
   ============================================================================= */

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* =============================================================================
   Typography
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
}

h1 {
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
}

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-light);
  text-decoration: none;
}

/* =============================================================================
   Buttons - Gold accent
   ============================================================================= */

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-bg-primary);
  border: none;
  font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  box-shadow: var(--shadow-gold);
}

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

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border-accent);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--color-accent-muted);
}

/* =============================================================================
   Form Elements
   ============================================================================= */

input,
textarea,
select {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

/* =============================================================================
   Cards and Containers
   ============================================================================= */

.card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.card:hover {
  border-color: var(--color-border-hover);
}

.card-elevated {
  background-color: var(--color-bg-elevated);
}

/* =============================================================================
   Navigation
   ============================================================================= */

.nav,
.navbar,
header {
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.nav-link {
  color: var(--color-text-secondary);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-primary);
}

/* =============================================================================
   Sidebar (Editor)
   ============================================================================= */

.sidebar,
.editor-sidebar {
  background-color: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
}

/* =============================================================================
   Tables
   ============================================================================= */

table {
  background-color: var(--color-bg-secondary);
}

th {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

td {
  border-bottom: 1px solid var(--color-border);
}

tr:hover {
  background-color: var(--color-bg-elevated);
}

/* =============================================================================
   Dropdown/Menu
   ============================================================================= */

.dropdown-menu,
.menu {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.dropdown-item:hover,
.menu-item:hover {
  background-color: var(--color-bg-hover);
}

/* =============================================================================
   Modal/Dialog
   ============================================================================= */

.modal-content,
.dialog {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.modal-header {
  border-bottom: 1px solid var(--color-border);
}

.modal-footer {
  border-top: 1px solid var(--color-border);
}

/* =============================================================================
   Badges/Tags
   ============================================================================= */

.badge {
  background-color: var(--color-accent-muted);
  color: var(--color-primary);
  border: 1px solid var(--color-border-accent);
}

.badge-success {
  background-color: rgba(80, 200, 120, 0.15);
  color: var(--color-success);
}

.badge-danger {
  background-color: rgba(232, 93, 93, 0.15);
  color: var(--color-danger);
}

/* =============================================================================
   Scrollbars (Webkit)
   ============================================================================= */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-500);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* =============================================================================
   Selection
   ============================================================================= */

::selection {
  background-color: var(--color-accent-muted);
  color: var(--color-primary);
}

/* =============================================================================
   Focus States
   ============================================================================= */

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* =============================================================================
   Loading/Skeleton States
   ============================================================================= */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-secondary) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}