/* Untitled UI — Components (buttons, inputs, badges, cards, form) */
@import url('./colors_and_type.css');

*, *::before, *::after { box-sizing: border-box; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 20px;
  border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  padding: 10px 16px; transition: background-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.btn-sm { padding: 8px 12px; font-size: 14px; line-height: 20px; }
.btn-md { padding: 10px 14px; font-size: 14px; line-height: 20px; }
.btn-lg { padding: 10px 16px; font-size: 16px; line-height: 24px; }
.btn-xl { padding: 12px 20px; font-size: 16px; line-height: 24px; }
.btn-2xl { padding: 16px 28px; font-size: 18px; line-height: 28px; }

/* Primary */
.btn-primary { background: var(--brand-600); color: var(--white); box-shadow: var(--shadow-xs), inset 0 0 0 1px rgba(255,255,255,0.12); }
.btn-primary:hover { background: var(--brand-700); }

/* Secondary gray */
.btn-secondary { background: var(--white); color: var(--gray-700); box-shadow: var(--ring-gray); }
.btn-secondary:hover { background: var(--gray-50); color: var(--gray-800); }

/* Secondary color */
.btn-secondary-color { background: var(--brand-50); color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand-200); }
.btn-secondary-color:hover { background: var(--brand-100); }

/* Tertiary gray / link */
.btn-tertiary { background: transparent; color: var(--gray-600); }
.btn-tertiary:hover { background: var(--gray-50); color: var(--gray-700); }
.btn-link { background: transparent; color: var(--brand-700); padding: 0; }
.btn-link:hover { color: var(--brand-800); }

/* Destructive */
.btn-destructive { background: var(--error-600); color: var(--white); box-shadow: var(--shadow-xs), inset 0 0 0 1px rgba(255,255,255,0.12); }
.btn-destructive:hover { background: var(--error-700); }

.btn[disabled] { background: var(--gray-100); color: var(--gray-400); box-shadow: none; cursor: not-allowed; }

/* ===== BADGES ===== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 18px;
  padding: 2px 8px; border-radius: 9999px; border: 1px solid transparent;
  background: var(--gray-50); color: var(--gray-700); border-color: var(--gray-200);
}
.badge-md { font-size: 14px; line-height: 20px; padding: 2px 10px; }
.badge-brand    { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.badge-success  { background: var(--success-50); color: var(--success-700); border-color: var(--success-200); }
.badge-warning  { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-200); }
.badge-error    { background: var(--error-50); color: var(--error-700); border-color: var(--error-200); }
.badge-blue     { background: var(--blue-50); color: var(--blue-700); border-color: #B2DDFF; }
.badge .dot { width:6px; height:6px; border-radius:9999px; background: currentColor; }

/* ===== INPUTS ===== */
.input {
  width: 100%; display: block;
  font-family: var(--font-body); font-size: 16px; line-height: 24px;
  color: var(--gray-900); background: var(--white);
  border: 1px solid var(--gray-300); border-radius: 8px;
  padding: 10px 14px; box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.input::placeholder { color: var(--gray-500); }
.input:focus { outline: none; border-color: var(--brand-300); box-shadow: var(--shadow-xs), var(--ring-brand); }
.input[disabled] { background: var(--gray-50); color: var(--gray-500); cursor: not-allowed; }
.input-error { border-color: var(--error-300); }
.input-error:focus { border-color: var(--error-300); box-shadow: var(--shadow-xs), var(--ring-error); }
.label { display:block; font-size:14px; line-height:20px; font-weight: 500; color: var(--gray-700); margin-bottom: 6px; }
.help  { font-size:14px; line-height:20px; color: var(--gray-600); margin-top: 6px; }
.help-error { color: var(--error-600); }

/* ===== CARDS ===== */
.card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 12px; box-shadow: var(--shadow-xs); padding: 24px;
}
.card-elevated { box-shadow: var(--shadow-md); border-color: transparent; }

/* ===== CHECKBOX/RADIO/TOGGLE (visual only) ===== */
.check { width: 16px; height: 16px; border: 1px solid var(--gray-300); border-radius: 4px; background: var(--white); display:inline-block; vertical-align:middle; }
.check.checked { background: var(--brand-50); border-color: var(--brand-600); position: relative; }
.check.checked::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237F56D9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat; }

.toggle { width: 36px; height: 20px; background: var(--gray-100); border-radius: 9999px; position: relative; display:inline-block; vertical-align: middle; transition: background var(--duration-base); }
.toggle::after { content:""; width: 16px; height: 16px; background: var(--white); border-radius: 9999px; position:absolute; top:2px; left:2px; box-shadow: var(--shadow-sm); transition: transform var(--duration-base); }
.toggle.on { background: var(--brand-600); }
.toggle.on::after { transform: translateX(16px); }

/* ===== AVATARS ===== */
.avatar { display:inline-flex; align-items:center; justify-content:center; border-radius: 9999px; background: var(--gray-100); color: var(--gray-600); font-weight: 500; overflow: hidden; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 40px; height: 40px; font-size: 14px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }