/* FiClear Brand Colors */
:root {
  --primary: #2563eb;        /* FiClear Blue */
  --primary-dark: #1d4ed8;   /* Darker blue */
  --accent: #3b82f6;         /* Lighter blue */
  --success: #22c55e;        /* Green */
  --warning: #f59e0b;        /* Amber */
  --destructive: #ef4444;    /* Red */
  --form-focus: #2563eb;     /* Blue focus */
}

body { 
  transition: opacity ease-in 0.2s; 
}

body[unresolved] { 
  opacity: 0; 
  display: block; 
  overflow: hidden; 
  position: relative; 
}

#clip_copy, #web-copy-btn-wk {
  background: var(--primary) !important;
}

/* Info card hover shadow (subtle elevation) */
.info-card {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.info-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}

/* Form focus styles — FiClear Blue */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--form-focus) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
  outline: none !important;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Focus-visible states */
.focus-ring-override:focus {
  border-color: var(--form-focus) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

/* Button Base Styles */
.btn-primary {
  background: var(--primary);
  color: white;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}