/* ==========================================================================
   Base Styles — Global Tokens, Resets, Typography
   ========================================================================== */

/* --- Design Tokens --- */
:root {
  --color-primary: #0d6efd;
  --color-primary-soft: #e7f1ff;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-success: #198754;
  --color-info: #0dcaf0;

  --color-border: #d0d7de;
  --color-border-subtle: #e5e7eb;
  --color-surface: #ffffff;
  --color-muted: #6c757d;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;

  --shadow-soft: 0 1px 3px rgba(0,0,0,0.08);
}

/* --- Reset --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f8f9fa;
  color: #212529;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  padding: var(--space-4);
}

/* --- Links --- */
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* --- Forms --- */
input, select, button {
  font-family: inherit;
}

/* --- Utility spacing --- */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

/* --- Containers --- */
section {
  margin-top: var(--space-4);
}