/*
 * LeadWithEmail — Design System v1.1
 * Scheme B (Light) — Implemented sitewide 2026-06-06
 * Source of truth: context/LeadWithEmail_Design_System.md
 *
 * Load order: after Tailwind CDN so these rules can override Tailwind defaults.
 * To switch schemes: update only the :root variable block below.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS VARIABLES — SCHEME B (LIGHT)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ────────────────────────────────────────────────────────── */
  --color-navy:        #0F1F4B;
  --color-navy-dark:   #091530;
  --color-navy-light:  #1A3170;
  --color-navy-muted:  #E8ECF5;
  --color-amber:       #F5A623;
  --color-amber-dark:  #D4891A;
  --color-amber-light: #FEF3DC;
  --color-white:       #FFFFFF;

  /* ── Neutral ──────────────────────────────────────────────────────── */
  --color-gray-900: #111827;
  --color-gray-600: #4B5563;
  --color-gray-400: #9CA3AF;
  --color-gray-200: #E5E7EB;
  --color-gray-100: #F3F4F6;
  --color-gray-50:  #F9FAFB;

  /* ── Semantic ─────────────────────────────────────────────────────── */
  --color-success:    #059669;
  --color-success-bg: #ECFDF5;
  --color-warning:    #D97706;
  --color-warning-bg: #FFFBEB;
  --color-error:      #DC2626;
  --color-error-bg:   #FEF2F2;
  --color-info:       #2563EB;
  --color-info-bg:    #EFF6FF;
  --color-hot:        #F5A623;
  --color-hot-bg:     #FEF3DC;

  /* ── Sidebar (Scheme B) ───────────────────────────────────────────── */
  --sidebar-bg:            #EEF2F7;
  --sidebar-border:        2px solid #CBD5E1;
  --sidebar-text:          #4B5563;
  --sidebar-text-active:   #0F1F4B;
  --sidebar-text-hover:    #111827;
  --sidebar-hover-bg:      #E4E9F0;
  --sidebar-active-bg:     #FEF3DC;
  --sidebar-active-border: 3px solid #F5A623;
  --sidebar-divider:       #CBD5E1;
  --sidebar-status-label:  #9CA3AF;
  --sidebar-avatar-bg:     #E8ECF5;
  --sidebar-avatar-text:   #0F1F4B;

  /* ── Topbar ───────────────────────────────────────────────────────── */
  --topbar-bg:     #FFFFFF;
  --topbar-border: 1px solid #E5E7EB;

  /* ── Typography ───────────────────────────────────────────────────── */
  --font-primary:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --tracking-tight: -0.02em;
  --tracking-wide:   0.05em;

  /* ── Radius ───────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(15,31,75,0.06);
  --shadow-md:    0 4px 6px rgba(15,31,75,0.08), 0 1px 3px rgba(15,31,75,0.06);
  --shadow-lg:    0 10px 15px rgba(15,31,75,0.10), 0 4px 6px rgba(15,31,75,0.06);
  --shadow-xl:    0 20px 25px rgba(15,31,75,0.12), 0 10px 10px rgba(15,31,75,0.06);
  --shadow-amber: 0 4px 14px rgba(245,166,35,0.30);

  /* ── Transitions ──────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — Scheme B light implementation
   ═══════════════════════════════════════════════════════════════════════════ */

#lwe-sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right: var(--sidebar-border);
}

/* Wordmark in sidebar header */
.ds-sidebar-wordmark {
  height: 24px;
  width: auto;
}

/* Nav item base */
.ds-nav-item {
  color: var(--sidebar-text) !important;
  border-left: 3px solid transparent;
}
.ds-nav-item:hover {
  background-color: var(--sidebar-hover-bg) !important;
  color: var(--sidebar-text-hover) !important;
}

/* Nav item active */
.ds-nav-active {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--sidebar-text-active) !important;
  border-left: var(--sidebar-active-border) !important;
  font-weight: 600;
}

/* Sidebar divider */
.ds-sidebar-divider {
  border-color: var(--sidebar-divider) !important;
}

/* Sidebar status text */
.ds-sidebar-status {
  color: var(--sidebar-status-label) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════════════════ */

#lwe-topbar, .ds-topbar {
  background-color: var(--topbar-bg) !important;
  border-bottom: var(--topbar-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-btn-primary {
  background-color: var(--color-navy) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-md);
  font-weight: 700;
  transition: background var(--transition-fast);
}
.ds-btn-primary:hover {
  background-color: var(--color-navy-dark) !important;
}

.ds-btn-accent {
  background-color: var(--color-amber) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-md);
  font-weight: 700;
  box-shadow: var(--shadow-amber);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.ds-btn-accent:hover {
  background-color: var(--color-amber-dark) !important;
  box-shadow: 0 6px 20px rgba(245,166,35,0.40);
}

.ds-btn-secondary {
  background-color: transparent !important;
  color: var(--color-navy) !important;
  border: 1.5px solid var(--color-navy) !important;
  border-radius: var(--radius-md);
}
.ds-btn-secondary:hover {
  background-color: var(--color-navy-muted) !important;
}

.ds-btn-danger {
  background-color: var(--color-error) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUT FIELDS
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-input:focus,
input.ds-input:focus,
select.ds-input:focus,
textarea.ds-input:focus {
  border-color: var(--color-navy) !important;
  box-shadow: 0 0 0 3px rgba(15,31,75,0.10) !important;
  outline: none !important;
}

/* Override Tailwind focus:border-blue-500 and focus:ring-blue-500 globally
   for inputs within the app shell */
#lwe-main input:focus,
#lwe-main select:focus,
#lwe-main textarea:focus {
  border-color: var(--color-navy) !important;
  box-shadow: 0 0 0 3px rgba(15,31,75,0.10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Stat cards — reply rate gets amber top border */
.ds-stat-amber {
  border-top: 3px solid var(--color-amber) !important;
}
.ds-stat-navy {
  border-top: 3px solid var(--color-navy-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-badge {
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.ds-badge-navy    { background: var(--color-navy-muted);   color: var(--color-navy); }
.ds-badge-amber   { background: var(--color-amber-light);  color: var(--color-amber-dark); }
.ds-badge-success { background: var(--color-success-bg);   color: var(--color-success); }
.ds-badge-error   { background: var(--color-error-bg);     color: var(--color-error); }
.ds-badge-warning { background: var(--color-warning-bg);   color: var(--color-warning); }
.ds-badge-hot     { background: var(--color-hot-bg);       color: var(--color-amber-dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   HOT LEAD PULSE DOT
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-amber);
  border-radius: var(--radius-full);
  animation: ds-pulse 2s infinite;
}

@keyframes ds-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-link {
  color: var(--color-navy) !important;
}
.ds-link:hover {
  color: var(--color-amber) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER (app shell footer bar)
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-app-footer {
  border-top: 1px solid var(--color-gray-200);
}
.ds-app-footer a {
  color: var(--color-gray-400);
}
.ds-app-footer a:hover {
  color: var(--color-gray-600);
}