/* ═══════════════════════════════════════════════════
   design-tokens.css — Tokens khớp 100% với DESIGN.md
   Áp dụng cho feature exam-creation-improvements
   (và các view sau này — không phá site.css cũ).

   Tham chiếu: DESIGN.md §1–§4
   - §1 Color palette  (Blue-600, Slate-50/100/700/900, status hex)
   - §2 Typography     (Inter primary)
   - §3 Spacing        (4/8/16/24/32px modular)
   - §4 Component specs(button radius 6px, card 8/12px, badge 9999px,
                        input 6px, table header BG, modal 12px)
═══════════════════════════════════════════════════ */

:root {
  /* ── DESIGN.md §1 Color tokens ─────────────────────── */
  --ds-blue-600:    #2563EB;   /* Primary brand */
  --ds-blue-700:    #1D4ED8;   /* Primary hover */
  --ds-blue-100:    #DBEAFE;   /* Info BG */
  --ds-blue-200:    #BFDBFE;   /* Focus ring */
  --ds-blue-500:    #3B82F6;   /* Info / focus border */
  --ds-indigo-500:  #6366F1;   /* Secondary accent */
  --ds-indigo-100:  #E0E7FF;   /* Sidebar active BG */
  --ds-indigo-700:  #4338CA;   /* Sidebar active text */

  --ds-slate-50:    #F8FAFC;   /* Body BG */
  --ds-slate-100:   #F1F5F9;   /* Subdued surface */
  --ds-slate-200:   #E2E8F0;   /* Border */
  --ds-slate-300:   #CBD5E1;   /* Input border */
  --ds-slate-400:   #94A3B8;   /* Disabled text */
  --ds-slate-500:   #64748B;   /* Muted/caption */
  --ds-slate-700:   #334155;   /* Body text */
  --ds-slate-900:   #0F172A;   /* Heading text */
  --ds-white:       #FFFFFF;   /* Card surface */

  --ds-success-500: #10B981;   /* Emerald */
  --ds-success-100: #D1FAE5;
  --ds-warning-500: #F59E0B;   /* Amber */
  --ds-warning-100: #FEF3C7;
  --ds-danger-500:  #EF4444;   /* Red */
  --ds-danger-100:  #FEE2E2;
  --ds-danger-600:  #DC2626;   /* Danger hover */

  /* ── DESIGN.md §3 Spacing scale ──────────────────────── */
  --ds-space-xs:  4px;
  --ds-space-sm:  8px;
  --ds-space-md:  16px;
  --ds-space-lg:  24px;
  --ds-space-xl:  32px;
  --ds-space-2xl: 48px;
  --ds-space-3xl: 64px;

  /* ── DESIGN.md §4 Border radius ──────────────────────── */
  --ds-radius-button: 6px;     /* §4 Buttons */
  --ds-radius-input:  6px;     /* §4 Input fields */
  --ds-radius-card-sm: 8px;    /* §4 Cards (small) */
  --ds-radius-card-lg: 12px;   /* §4 Cards (large) / Modal */
  --ds-radius-pill:  9999px;   /* §4 Badges */

  /* ── DESIGN.md §4 Shadows ────────────────────────────── */
  --ds-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --ds-shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* ── Bootstrap 5 variable overrides ─────────────────── */
  /* Đặt --bs-primary đúng spec → mọi .btn-primary, .text-primary,
     .bg-primary, .border-primary tự động khớp Blue-600. */
  --bs-primary:        var(--ds-blue-600);
  --bs-primary-rgb:    37, 99, 235;
  --bs-success:        var(--ds-success-500);
  --bs-success-rgb:    16, 185, 129;
  --bs-warning:        var(--ds-warning-500);
  --bs-warning-rgb:    245, 158, 11;
  --bs-danger:         var(--ds-danger-500);
  --bs-danger-rgb:     239, 68, 68;
  --bs-info:           var(--ds-blue-500);
  --bs-info-rgb:       59, 130, 246;
  --bs-body-bg:        var(--ds-slate-50);
  --bs-body-color:     var(--ds-slate-700);
}

/* ═══════════════════════════════════════════════════
   DESIGN.md §4 — Buttons
   - Radius 6px (NOT pill-shaped)
   - Padding 8px 16px standard
   - Active scale 0.98
   - Primary BG #2563EB, hover #1D4ED8
═══════════════════════════════════════════════════ */
.ds-btn,
.btn.ds-btn {
  border-radius: var(--ds-radius-button);
  padding: var(--ds-space-sm) var(--ds-space-md);
  font-weight: 600;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
  border: 1px solid transparent;
}

.ds-btn:active {
  transform: scale(0.98);
}

.ds-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ds-blue-200);
}

.ds-btn-primary {
  background-color: var(--ds-blue-600);
  color: var(--ds-white);
  border-color: var(--ds-blue-600);
}

.ds-btn-primary:hover {
  background-color: var(--ds-blue-700);
  border-color: var(--ds-blue-700);
  color: var(--ds-white);
}

.ds-btn-secondary {
  background-color: var(--ds-white);
  color: var(--ds-slate-700);
  border-color: var(--ds-slate-300);
}

.ds-btn-secondary:hover {
  background-color: var(--ds-slate-50);
  color: var(--ds-slate-700);
}

.ds-btn-ghost {
  background-color: transparent;
  color: #475569; /* DESIGN.md §4 ghost text */
  border-color: transparent;
}

.ds-btn-ghost:hover {
  background-color: var(--ds-slate-100);
  color: #475569;
}

.ds-btn-danger {
  background-color: var(--ds-danger-500);
  color: var(--ds-white);
  border-color: var(--ds-danger-500);
}

.ds-btn-danger:hover {
  background-color: var(--ds-danger-600);
  border-color: var(--ds-danger-600);
  color: var(--ds-white);
}

/* ═══════════════════════════════════════════════════
   DESIGN.md §4 — Input fields
   - BG white, border 1px solid #CBD5E1, radius 6px
   - Focus border #3B82F6 + ring rgba(59,130,246,0.2)
   - Error border #EF4444
   - Disabled BG #F1F5F9, text #94A3B8
═══════════════════════════════════════════════════ */
.ds-input,
.form-control.ds-input,
.form-select.ds-input {
  background-color: var(--ds-white);
  border: 1px solid var(--ds-slate-300);
  border-radius: var(--ds-radius-input);
  color: var(--ds-slate-700);
  padding: var(--ds-space-sm) var(--ds-space-md);
}

.ds-input:focus,
.form-control.ds-input:focus,
.form-select.ds-input:focus {
  border-color: var(--ds-blue-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  outline: none;
}

.ds-input.is-invalid,
.form-control.ds-input.is-invalid {
  border-color: var(--ds-danger-500);
}

.ds-input:disabled,
.form-control.ds-input:disabled {
  background-color: var(--ds-slate-100);
  color: var(--ds-slate-400);
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════
   DESIGN.md §4 — Cards
   - Radius 8px (small) hoặc 12px (large)
   - Shadow subtle, padding 24px nội dung
═══════════════════════════════════════════════════ */
.ds-card {
  background-color: var(--ds-white);
  border: 1px solid var(--ds-slate-200);
  border-radius: var(--ds-radius-card-lg);
  box-shadow: var(--ds-shadow-card);
  padding: var(--ds-space-lg);
}

.ds-card-sm {
  border-radius: var(--ds-radius-card-sm);
}

/* ═══════════════════════════════════════════════════
   DESIGN.md §4 — Tables (Score/Quiz Data)
   - Header: BG slate-50, text slate-700, weight 600,
     uppercase, 0.75rem, padding 12px 16px,
     bottom border 1px solid slate-200.
   - Row: padding 16px, bottom border slate-100.
   - Hover: slate-50.
═══════════════════════════════════════════════════ */
.ds-table {
  width: 100%;
  background-color: var(--ds-white);
  border-collapse: collapse;
}

.ds-table thead th {
  background-color: var(--ds-slate-50);
  color: #475569;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 12px var(--ds-space-md);
  border-bottom: 1px solid var(--ds-slate-200);
  text-align: left;
}

.ds-table tbody td {
  padding: var(--ds-space-md);
  border-bottom: 1px solid var(--ds-slate-100);
  background-color: var(--ds-white);
  color: var(--ds-slate-700);
}

.ds-table tbody tr:hover td {
  background-color: var(--ds-slate-50);
}

/* ═══════════════════════════════════════════════════
   DESIGN.md §4 — Badges / Status pills
   - Fully rounded 9999px, padding 4px 10px,
     font 0.75rem semi-bold.
═══════════════════════════════════════════════════ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--ds-radius-pill);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.ds-badge-success { background-color: var(--ds-success-100); color: var(--ds-success-500); }
.ds-badge-warning { background-color: var(--ds-warning-100); color: var(--ds-warning-500); }
.ds-badge-danger  { background-color: var(--ds-danger-100);  color: var(--ds-danger-500); }
.ds-badge-info    { background-color: var(--ds-blue-100);    color: var(--ds-blue-500); }

/* ═══════════════════════════════════════════════════
   DESIGN.md §4 — Modal / Alerts
   - Modal radius 12px, shadow elevated.
   - Alerts: subtle BG, border-left 4px primary.
═══════════════════════════════════════════════════ */
.ds-modal {
  background-color: var(--ds-white);
  border-radius: var(--ds-radius-card-lg);
  box-shadow: var(--ds-shadow-modal);
}

.ds-alert {
  padding: var(--ds-space-md);
  border-left: 4px solid var(--ds-blue-500);
  background-color: var(--ds-blue-100);
  color: var(--ds-slate-700);
  border-radius: var(--ds-radius-card-sm);
}

.ds-alert-info    { border-left-color: var(--ds-blue-500);    background-color: var(--ds-blue-100); }
.ds-alert-success { border-left-color: var(--ds-success-500); background-color: var(--ds-success-100); }
.ds-alert-warning { border-left-color: var(--ds-warning-500); background-color: var(--ds-warning-100); }
.ds-alert-danger  { border-left-color: var(--ds-danger-500);  background-color: var(--ds-danger-100); }