/* design-system.css - v1.0.4 - 2026-02-10 15:25 */
:root {
  /* Colors */
  --primary: #6366f1; /* Indigo 500 */
  --primary-hover: #4f46e5;
  --primary-light: #e0e7ff;
  
  --bg-main: #f8fafc; /* Slate 50 */
  --bg-card: #ffffff;
  
  /* Input System */
  --input-bg: #fdfdfd; 
  --input-bg-focus: #ffffff;
  --input-border: #cbd5e1; /* Slate 300 - clearly visible */
  --input-border-focus: #6366f1;
  --input-ring-focus: rgba(99, 102, 241, 0.15);
  --input-text: #0f172a; /* Slate 900 */
  --input-placeholder: #94a3b8; /* Slate 400 */
  
  /* Borders */
  --border-radius-lg: 0.75rem;
  --border-radius-md: 0.5rem;
  --stylish-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Base resets */
body {
  background-color: var(--bg-main);
  transition: all 0.3s ease;
  min-height: 100vh;
}

/* Rich Typography */
h1, h2, h3 {
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--input-text);
}

/* Global Input Styling - High Visibility & Stylish Borders */
input[type="text"], 
input[type="number"], 
input[type="email"], 
input[type="password"], 
input[type="date"], 
select, 
textarea {
  background-color: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 0.5rem 0.875rem !important; /* Reduced vertical padding */
  color: var(--input-text) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  width: 100%;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Remove default focus ring from Tailwind if it clashes */
input:focus, select:focus, textarea:focus {
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

input::placeholder, textarea::placeholder {
  color: var(--input-placeholder) !important;
}

input:focus, select:focus, textarea:focus {
  background-color: var(--input-bg-focus) !important;
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 4px var(--input-ring-focus), 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Select custom arrow - Aggressive fix for double arrows */
select {
  cursor: pointer;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.25em 1.25em !important;
  padding-right: 2rem !important; /* Slightly less padding to avoid cutoff */
}

/* Specific fix for IE/Edge to hide original arrow */
select::-ms-expand {
  display: none !important;
}

/* Premium Card Style */
.premium-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, #fcfcfc 100%);
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.08); /* Slightly more visible border */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.premium-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.2);
}

/* Section Header styling */
.section-header {
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--input-text);
  border-left: 4px solid var(--primary);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

/* Dark Mode Variables */
:root.dark {
  --bg-main: #020617; /* Darker Slate 950 */
  --bg-card: #0f172a; /* Slate 900 */
  --input-bg: #1e293b; 
  --input-bg-focus: #0f172a;
  --input-border: #334155; /* Slate 700 */
  --input-border-focus: #6366f1; /* Indigo 500 */
  --input-text: #f1f5f9; /* Slate 100 */
  --input-placeholder: #475569;
  --input-ring-focus: rgba(99, 102, 241, 0.3);
}

/* Also support system preference as default if no direct class is set, 
   but we will prioritize the .dark class for the manual toggle */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg-main: #020617;
    --bg-card: #0f172a;
    --input-bg: #1e293b; 
    --input-bg-focus: #0f172a;
    --input-border: #334155;
    --input-border-focus: #6366f1;
    --input-text: #f1f5f9;
    --input-placeholder: #475569;
    --input-ring-focus: rgba(99, 102, 241, 0.3);
  }
}

/* Dark Mode Overrides (used for both media and class) */
@media (prefers-color-scheme: dark) {
  :root:not(.light) .premium-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-color: rgba(255, 255, 255, 0.05);
  }
  
  :root:not(.light) .bg-white { background-color: var(--bg-card) !important; }
  :root:not(.light) .bg-gray-50 { background-color: #1e293b !important; }
  :root:not(.light) .text-gray-800, :root:not(.light) .text-gray-900, :root:not(.light) h1, :root:not(.light) h2, :root:not(.light) h3 { color: #f1f5f9 !important; }
  :root:not(.light) .text-gray-700 { color: #cbd5e1 !important; }
  :root:not(.light) .text-gray-600 { color: #94a3b8 !important; }
  :root:not(.light) .border { border-color: #334155 !important; }
  :root:not(.light) .border-gray-100, :root:not(.light) .border-gray-200, :root:not(.light) .border-gray-300 { border-color: #334155 !important; }
  
  :root:not(.light) nav.bg-white { 
    background-color: rgba(15, 23, 42, 0.8) !important; 
    backdrop-filter: blur(12px); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
}

:root.dark .premium-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-color: rgba(255, 255, 255, 0.05);
}

:root.dark .bg-white { background-color: var(--bg-card) !important; }
:root.dark .bg-gray-50 { background-color: #1e293b !important; }
:root.dark .text-gray-800, :root.dark .text-gray-900, :root.dark h1, :root.dark h2, :root.dark h3 { color: #f1f5f9 !important; }
:root.dark .text-gray-700 { color: #cbd5e1 !important; }
:root.dark .text-gray-600 { color: #94a3b8 !important; }
:root.dark .border { border-color: #334155 !important; }
:root.dark .border-gray-100, :root.dark .border-gray-200, :root.dark .border-gray-300 { border-color: #334155 !important; }

:root.dark nav.bg-white { 
  background-color: rgba(15, 23, 42, 0.8) !important; 
  backdrop-filter: blur(12px); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Specific Overrides for Danger Zone and Red utility classes in Dark Mode */
:root.dark .bg-red-50 {
  background-color: rgba(127, 29, 29, 0.2) !important; /* Dark Red background */
  border-color: rgba(220, 38, 38, 0.3) !important;
}

:root.dark .text-red-800, :root.dark .text-red-600 {
  color: #fca5a5 !important; /* Light red/pink text */
}

:root.dark .border-red-200 {
  border-color: rgba(220, 38, 38, 0.3) !important;
}

:root.dark .bg-white\/50 {
  background-color: rgba(30, 41, 59, 0.5) !important;
}

:root.dark .bg-red-50.text-red-600 {
  background-color: rgba(127, 29, 29, 0.3) !important;
  color: #fca5a5 !important;
}

/* Also for System Dark Preference */
@media (prefers-color-scheme: dark) {
  :root:not(.light) .bg-red-50 {
    background-color: rgba(127, 29, 29, 0.2) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
  }
  :root:not(.light) .text-red-800, :root:not(.light) .text-red-600 {
    color: #fca5a5 !important;
  }
}