/**
 * QUEZADO SYSTEM CORE
 * Global Design System & UI Components
 * * Contém: Variáveis, Tipografia Base, Inputs e Botões.
 */

:root {
  /* Colors */
  --qzd-color-blue-dark: #002D73;
  --qzd-color-blue-light: #5C84DA;
  --qzd-color-yellow-highlight: #ffd490;
  --qzd-color-text-dark: #002D73;
  --qzd-color-text-light: #717171;
  --qzd-color-text-placeholder: #A0AEC0;
  --qzd-color-bg-light: #f7fafc;
  --qzd-color-border: #e0e6f0;
  --qzd-color-white: #ffffff;
  --qzd-color-error: #D32F2F;

  /* Spacing & Sizing */
  --qzd-radius-md: 8px;
  --qzd-radius-lg: 12px;
  --qzd-radius-xl: 16px;
}

/* Base Typography */
.qzd-system-scope {
  font-family: 'Geist', sans-serif;
  color: var(--qzd-color-text-dark);
  line-height: 1.5;
}

/* --- UI Component: Inputs --- */
.qzd-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--qzd-color-text-dark);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.qzd-input {
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  font-family: inherit;
  color: var(--qzd-color-text-dark);
  background-color: var(--qzd-color-white);
  border: 2px solid var(--qzd-color-border);
  border-radius: var(--qzd-radius-lg);
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.qzd-input:focus {
  outline: none;
  border-color: var(--qzd-color-blue-light);
  box-shadow: 0 0 0 4px rgba(92, 132, 218, 0.15);
  background-color: var(--qzd-color-white);
}

.qzd-input::placeholder {
  color: var(--qzd-color-text-placeholder);
  font-weight: 400;
}

textarea.qzd-input {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

/* --- UI Component: Buttons --- */
.qzd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 32px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: var(--qzd-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1;
}

.qzd-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--qzd-color-border);
  color: var(--qzd-color-text-light);
  transform: none !important;
  box-shadow: none !important;
}

/* Primary Action (Dark Blue) */
.qzd-btn-primary {
  background-color: var(--qzd-color-blue-dark);
  color: var(--qzd-color-white);
  box-shadow: 0 4px 12px rgba(0, 45, 115, 0.2);
}

.qzd-btn-primary:hover {
  background-color: var(--qzd-color-blue-light);
  color: var(--qzd-color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(92, 132, 218, 0.3);
}

/* Secondary Action (Ghost/Back) */
.qzd-btn-ghost {
  background-color: transparent;
  border: 2px solid var(--qzd-color-border);
  color: var(--qzd-color-text-light);
}

.qzd-btn-ghost:hover {
  background-color: var(--qzd-color-bg-light);
  border-color: var(--qzd-color-text-dark);
  color: var(--qzd-color-text-dark);
}

/* --- UI Component: OTP Input (6 Digits) --- */
.qzd-input-otp {
  font-size: 32px;
  text-align: center;
  letter-spacing: 10px;
  font-weight: 700;
  color: var(--qzd-color-blue-dark);
  background-color: var(--qzd-color-bg-light);
  border: 2px solid transparent;
  padding: 15px;
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
  
  /* Layout fix */
  width: 100%;
  max-width: 340px;
  display: block;
  margin: 0 auto;
}

.qzd-input-otp:focus {
  background-color: var(--qzd-color-white);
  border-color: var(--qzd-color-blue-light);
  box-shadow: 0 10px 25px rgba(92, 132, 218, 0.15);
  outline: none;
}

.qzd-input-otp::placeholder {
  letter-spacing: 4px;
  font-size: 20px;
  color: #cbd5e0;
  font-weight: 400;
  transform: translateY(-2px);
}