/* ============================================================
   base.css — Design tokens, reset, typography
   Loaded on every page via Page::displayHeader()
   ============================================================ */

:root {

  /* ── Primitive palette ──────────────────────────────────── */

  /* Blues */
  --blue-50:  #e8f0fa;
  --blue-100: #d1e2f5;
  --blue-200: #a3c5ec;
  --blue-300: #76a8e2;
  --blue-400: #4d8ed9;
  --blue-500: #0066cc;
  --blue-600: #0052a3;
  --blue-700: #003d7a;

  /* Greens — brand / landing */
  --green-50:  #edf4ef;
  --green-100: #cfe2d4;
  --green-300: #88b594;
  --green-500: #3d6b47;
  --green-700: #2a4d33;

  /* Greys */
  --grey-0:   #ffffff;
  --grey-25:  #fbfbfd;
  --grey-50:  #f6f7f9;
  --grey-100: #eceef2;
  --grey-200: #dfe2e8;
  --grey-300: #c4c9d2;
  --grey-400: #9aa1ad;
  --grey-500: #6b7280;
  --grey-600: #4a5160;
  --grey-700: #2f3540;
  --grey-800: #1c2029;
  --grey-900: #0f1218;

  /* Reds — danger */
  --red-50:  #fdecec;
  --red-100: #f9c9c9;
  --red-500: #d33030;
  --red-700: #962121;

  /* Ambers — warning */
  --amber-50:  #fff8e1;
  --amber-100: #ffecb3;
  --amber-500: #b78104;
  --amber-700: #855e02;

  /* Greens (semantic) — success */
  --success-50:  #e7f5ec;
  --success-100: #c5e6d0;
  --success-500: #1f8b4c;
  --success-700: #16683a;

  /* Cyans — info */
  --cyan-50:  #e6f4f8;
  --cyan-500: #0a7da3;
  --cyan-700: #07607c;

  /* ── Semantic tokens ────────────────────────────────────── */

  /* Surfaces & text */
  --color-bg:              var(--grey-25);
  --color-surface:         var(--grey-0);
  --color-surface-alt:     var(--grey-50);
  --color-surface-sunken:  var(--grey-100);
  --color-border:          var(--grey-200);
  --color-border-strong:   var(--grey-300);
  --color-text:            var(--grey-800);
  --color-text-muted:      var(--grey-500);
  --color-text-soft:       var(--grey-400);
  --color-text-inverse:    var(--grey-0);

  /* Primary (admin) */
  --color-primary:         var(--blue-500);
  --color-primary-hover:   var(--blue-600);
  --color-primary-active:  var(--blue-700);
  --color-primary-light:   var(--blue-50);
  --color-primary-fg:      var(--grey-0);

  /* Brand (landing / marketing only) */
  --color-brand:           var(--green-500);
  --color-brand-hover:     var(--green-700);
  --color-brand-light:     var(--green-50);
  --color-brand-fg:        var(--grey-0);

  /* Status */
  --color-danger:          var(--red-500);
  --color-danger-bg:       var(--red-50);
  --color-danger-border:   var(--red-100);
  --color-warning:         var(--amber-500);
  --color-warning-bg:      var(--amber-50);
  --color-warning-border:  var(--amber-100);
  --color-success:         var(--success-500);
  --color-success-bg:      var(--success-50);
  --color-success-border:  var(--success-100);
  --color-info:            var(--cyan-500);
  --color-info-bg:         var(--cyan-50);
  --color-info-border:     var(--grey-100);

  /* Focus */
  --color-focus-ring:      rgba(0, 102, 204, 0.32);

  /* @deprecated — crimson-as-warning BC alias; see design-system.md §20 */
  --color-warning-legacy-crimson: crimson;

  /* ── Typography ─────────────────────────────────────────── */

  --font-base: 'Montserrat', system-ui, -apple-system, sans-serif;

  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ── Spacing (4 px baseline grid) ───────────────────────── */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ── Border radius ──────────────────────────────────────── */

  --radius-xs:     4px;
  --radius-sm:     6px;
  --radius-md:     8px;
  --radius-lg:    12px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ── Shadows ────────────────────────────────────────────── */

  --shadow-xs:    0 1px 2px rgba(15, 18, 24, 0.06);
  --shadow-sm:    0 1px 4px rgba(15, 18, 24, 0.08);
  --shadow-md:    0 4px 12px rgba(15, 18, 24, 0.10);
  --shadow-lg:    0 8px 24px rgba(15, 18, 24, 0.14);
  --shadow-xl:    0 16px 48px rgba(15, 18, 24, 0.18);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-inset: inset 0 1px 0 rgba(15, 18, 24, 0.04);

  /* ── Breakpoints ────────────────────────────────────────── */

  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

}

body, table, tr, td, form, input, textarea, select {
  font-family: var(--font-base);
  font-size: 14px;
}

hr {
  border-top: 1px solid silver;
}

a {
  color: var(--color-primary);
}

h2 {
  font-size: 18px;
  font-weight: bold;
}