@import './_variables.css';
@import './_reset.css';
@import './components/auth.css';
@import './components/onboarding.css';
@import './components/layout.css';
@import './components/dashboard.css';
@import './components/tasks.css';
@import './components/goals.css';
@import './components/toast.css';
@import './components/modal.css';
@import './components/chat.css';
@import './components/calendar.css';
@import './components/reminders.css';

/* ── Utility classes ── */
.hidden   { display: none !important; }
.sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-sm   { gap: var(--space-sm); }
.gap-md   { gap: var(--space-md); }
.mt-md    { margin-top: var(--space-md); }
.mt-lg    { margin-top: var(--space-lg); }
.text-muted { color: var(--color-text-muted); }
.text-sm    { font-size: var(--text-sm); }
.text-danger { color: var(--color-danger); }

/* ── Buttons ── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-sm);
  padding:         0.625rem var(--space-lg);
  border-radius:   var(--radius-md);
  font-size:       var(--text-sm);
  font-weight:     500;
  transition:      background var(--transition-fast), transform var(--transition-fast);
  cursor:          pointer;
}

.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--color-primary);
  color:      #fff;
}
.btn--primary:hover { background: var(--color-primary-dark); }

.btn--ghost {
  background: transparent;
  color:      var(--color-text-muted);
  border:     1px solid var(--color-border);
}
.btn--ghost:hover { background: var(--color-surface-2); }

.btn--danger {
  background: var(--color-danger);
  color:      #fff;
}

.btn--full  { width: 100%; }
.btn--sm    { padding: 0.375rem var(--space-md); font-size: var(--text-xs); }
.btn--xs    { padding: 0.2rem 0.5rem; font-size: var(--text-xs); }
.btn--icon  { padding: 0.4rem; }
.btn--active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* ── Form inputs ── */
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
}

.form-group label,
.form-label {
  font-size:   var(--text-sm);
  font-weight: 500;
  color:       var(--color-text-muted);
}

.input,
.form-input {
  width:         100%;
  padding:       0.625rem var(--space-md);
  background:    var(--color-surface-2);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size:     var(--text-base);
  color:         var(--color-text);
  font-family:   inherit;
  transition:    border-color var(--transition-fast);
}

.input:focus,
.form-input:focus { outline: none; border-color: var(--color-primary); }

.input::placeholder,
.form-input::placeholder { color: var(--color-text-muted); }

textarea.input,
textarea.form-input,
.form-textarea { resize: vertical; min-height: 80px; }

/* Modal action row */
.modal-actions {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--space-sm);
  padding-top:     var(--space-md);
  border-top:      1px solid var(--color-border);
  margin-top:      var(--space-md);
}

.modal-actions .btn--danger { margin-right: auto; }

/* Form row (two columns) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* ── Card ── */
.card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-lg);
}

/* ── Badge ── */
.badge {
  display:       inline-block;
  padding:       2px 8px;
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   500;
}