html {
  font-size: 14px;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

:root {
  --brand-primary: #0f172a;
  --brand-secondary: #0ea5e9;
  --brand-accent: #f59e0b;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --info-color: #0ea5e9;
}

* {
  box-sizing: border-box;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0.75rem;
  z-index: 1000;
  border-radius: 0.5rem;
  background: #111827;
  color: #ffffff;
  padding: 0.5rem 0.75rem;
}

.skip-link:focus {
  top: 0.75rem;
}

/* ============ BUTTONS ============ */
.brand-btn {
  @apply inline-flex items-center justify-center gap-2 px-5 py-3 rounded-lg font-semibold text-white transition-all duration-200 transform;
  background: linear-gradient(135deg, var(--brand-primary) 0%, #1e293b 100%);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2);
}

.brand-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3);
}

.brand-btn:active {
  transform: translateY(0);
}

.brand-btn-outline {
  @apply inline-flex items-center justify-center gap-2 px-5 py-3 rounded-lg font-semibold transition-all duration-200;
  border: 2px solid var(--brand-secondary);
  color: var(--brand-secondary);
  background-color: white;
}

.brand-btn-outline:hover {
  background-color: rgba(14, 165, 233, 0.05);
  transform: translateY(-2px);
}

.brand-btn-sm {
  @apply px-3 py-2 text-sm;
}

.brand-btn-lg {
  @apply px-6 py-4 text-lg;
}

.brand-link {
  @apply inline-flex items-center gap-1 text-sm font-medium text-slate-700 hover:text-slate-900 transition-colors rounded-md px-2 py-1;
}

.brand-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.brand-focus {
  border-radius: 0.375rem;
}

.brand-focus:focus-visible {
  outline: 2px solid var(--brand-secondary);
}

/* ============ CARDS ============ */
.card {
  @apply rounded-xl bg-white p-6 shadow-md border border-slate-100 transition-all duration-300;
}

.card:hover {
  @apply shadow-lg border-slate-200;
}

.card-header {
  @apply pb-4 border-b border-slate-200 mb-4;
}

.card-title {
  @apply text-xl font-bold text-slate-900 flex items-center gap-2;
}

.card-subtitle {
  @apply text-sm text-slate-600 mt-1;
}

/* ============ FORMS ============ */
.form-group {
  @apply mb-5;
}

.form-label {
  @apply block text-sm font-semibold text-slate-700 mb-2;
}

.form-input,
.form-select,
.form-textarea {
  @apply w-full rounded-lg border border-slate-300 px-4 py-2.5 text-sm transition-all duration-200;
}

input::placeholder,
textarea::placeholder {
  opacity: 0.5 !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  @apply border-slate-400 ring-2 ring-blue-500/20;
  background-color: white;
}

.form-textarea {
  @apply min-h-[120px] resize-none;
}

.form-error {
  @apply text-sm text-red-600 mt-2 flex items-center gap-1;
}

.form-hint {
  @apply text-xs text-slate-500 mt-1;
}

/* ============ TABLES ============ */
.table-wrapper {
  @apply rounded-xl overflow-hidden shadow-md border border-slate-100;
}

.table-modern {
  @apply w-full text-sm;
}

.table-modern thead {
  @apply bg-gradient-to-r from-slate-50 to-slate-100;
}

.table-modern th {
  @apply px-6 py-4 text-left font-semibold text-slate-700 text-xs uppercase tracking-wide;
}

.table-modern tbody tr {
  @apply border-b border-slate-100 hover:bg-blue-50/30 transition-colors duration-150;
}

.table-modern td {
  @apply px-6 py-4 text-slate-700;
}

.table-modern tbody tr:last-child {
  @apply border-b-0;
}

/* ============ BADGES ============ */
.badge {
  @apply inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

.badge-warning {
  @apply bg-amber-100 text-amber-800;
}

.badge-danger {
  @apply bg-red-100 text-red-800;
}

.badge-info {
  @apply bg-blue-100 text-blue-800;
}

.badge-slate {
  @apply bg-slate-100 text-slate-800;
}

/* ============ ALERTS ============ */
.alert {
  @apply rounded-lg border p-4 flex items-gap-3;
}

.alert-success {
  @apply border-green-200 bg-green-50 text-green-800;
}

.alert-warning {
  @apply border-amber-200 bg-amber-50 text-amber-800;
}

.alert-danger {
  @apply border-red-200 bg-red-50 text-red-800;
}

.alert-info {
  @apply border-blue-200 bg-blue-50 text-blue-800;
}

/* ============ SECTION HEADERS ============ */
.section-header {
  @apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6;
}

.section-title {
  @apply text-3xl font-bold text-slate-900;
}

.section-description {
  @apply text-slate-600 text-sm;
}

.section-actions {
  @apply flex flex-wrap items-center gap-2;
}

/* ============ EMPTY STATES ============ */
.empty-state {
  @apply rounded-lg border-2 border-dashed border-slate-300 bg-white p-12 text-center;
}

.empty-state-icon {
  @apply mx-auto h-8 w-8 text-slate-400 mb-2;
}

.empty-state-title {
  @apply text-lg font-semibold text-slate-900;
}

.empty-state-text {
  @apply text-sm text-slate-600 mt-2;
}