/* ============================================================================
 * M&D FEDERAL — Brand tokens
 * ============================================================================
 * Single source of truth for colors, type, spacing, radii, motion.
 * Reference these vars in your stylesheets — never hand-code raw hex.
 *
 * Loading: import this file (and the @import block below pulls Google Fonts).
 *   <link rel="stylesheet" href="path/to/brand/tokens.css">
 * ============================================================================ */

/* --- Web fonts -------------------------------------------------------------- */
/* Public Sans — official US Government typeface (USWDS).                      */
/* Libre Baskerville — display serif that echoes the M&D wordmark.             */
/* JetBrains Mono — italic mono label face (matches "FEDERAL" treatment).      */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,500;1,700&display=swap');

:root {
  /* ─── Brand color · core ──────────────────────────────────────────────── */
  --federal-navy:        #062E5C;   /* primary — flag/seal navy from logo   */
  --federal-navy-mid:    #0E4A8F;   /* hover, links, interactive            */
  --federal-navy-deep:   #021F40;   /* deepest navy for footers, type       */
  --federal-navy-ink:    #041E3D;   /* near-black navy for body type        */

  /* ─── Brand color · accent (use SPARINGLY — only signal + emphasis) ──── */
  --federal-crimson:     #B62222;   /* logo red — alerts, accents, rules    */
  --federal-crimson-2:   #8E1717;   /* pressed/dark variant                 */
  --federal-crimson-soft:#C94747;   /* hover lift                           */

  /* ─── Neutrals · paper & stone ────────────────────────────────────────── */
  --parchment:           #F7F4EE;   /* primary background — warm off-white  */
  --ivory:               #FAF7F0;   /* card / surface 1                     */
  --bone:                #F4EFE5;   /* secondary cream — used in reverse logo*/
  --paper:               #FFFFFF;   /* pure white when needed               */

  /* ─── Neutrals · slate (text + UI) ────────────────────────────────────── */
  --slate-900:           #11202E;   /* headings, near-black                 */
  --slate-800:           #1A2A39;   /* body emphasis                        */
  --slate-700:           #3D4D5C;   /* body                                 */
  --slate-600:           #4E5D6D;   /* body-secondary, between 500/700      */
  --slate-500:           #5F6F7E;   /* secondary body                       */
  --slate-400:           #7A8794;   /* muted, captions                      */
  --slate-300:           #B6BEC6;   /* dividers, hairlines on light         */
  --slate-200:           #D6DCE2;   /* card borders                         */
  --slate-100:           #E7EBEF;   /* surface borders, table rules         */
  --stone:               #C9C3B5;   /* warm gray — pull from logo patient   */

  /* ─── Semantic ────────────────────────────────────────────────────────── */
  --c-success:           #1E7F4F;   /* clinical positive                    */
  --c-success-bg:        #E3F1E9;
  --c-warning:           #C6841E;   /* caution                              */
  --c-warning-bg:        #FBF1DC;
  --c-error:             var(--federal-crimson);
  --c-error-bg:          #FAE5E5;
  --c-info:              var(--federal-navy-mid);
  --c-info-bg:           #E6EEF8;

  /* ─── Semantic aliases (recommended for components) ───────────────────── */
  --bg-page:             var(--parchment);
  --bg-surface:          var(--ivory);
  --bg-elevated:         var(--paper);
  --bg-inverse:          var(--federal-navy);
  --bg-inverse-deep:     var(--federal-navy-deep);

  --fg-default:          var(--slate-800);
  --fg-muted:            var(--slate-500);
  --fg-subtle:           var(--slate-400);
  --fg-on-inverse:       var(--bone);
  --fg-on-inverse-muted: #B7C2D2;
  --fg-brand:            var(--federal-navy);
  --fg-accent:           var(--federal-crimson);

  --border-default:      var(--slate-200);
  --border-strong:       var(--slate-300);
  --border-inverse:      rgba(244,239,229,0.22);
  --rule-accent:         var(--federal-crimson);
  --rule-brand:          var(--federal-navy);

  /* ─── Typography · families ──────────────────────────────────────────── */
  --font-serif:    'Libre Baskerville', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-sans:     'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

  /* ─── Typography · sizes (rem at 16px root) ──────────────────────────── */
  --fs-display-1: 4.00rem;   /* 64 — hero headlines                         */
  --fs-display-2: 3.00rem;   /* 48 — section heros                          */
  --fs-h1:        2.25rem;   /* 36                                          */
  --fs-h2:        1.75rem;   /* 28                                          */
  --fs-h3:        1.375rem;  /* 22                                          */
  --fs-h4:        1.125rem;  /* 18                                          */
  --fs-body-lg:   1.125rem;  /* 18 — long-form reading                      */
  --fs-body:      1.00rem;   /* 16                                          */
  --fs-small:     0.875rem;  /* 14                                          */
  --fs-micro:     0.75rem;   /* 12 — mono labels, captions                  */

  /* ─── Typography · weights & line-heights ────────────────────────────── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:    1.15;
  --lh-snug:     1.30;
  --lh-body:     1.55;
  --lh-relaxed:  1.70;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-label:  0.08em;   /* mono labels                                */
  --tracking-caps:   0.12em;   /* small caps                                 */

  /* ─── Spacing scale (4px base) ───────────────────────────────────────── */
  --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:  80px;
  --space-10:120px;

  /* ─── Radii (kept restrained — governmental marks read sharp) ────────── */
  --radius-0:  0;
  --radius-1:  2px;       /* inputs, tags                                   */
  --radius-2:  4px;       /* cards                                          */
  --radius-3:  8px;       /* large surfaces — used sparingly                */

  /* ─── Borders ────────────────────────────────────────────────────────── */
  --border-thin:    1px;
  --border-rule:    2px;   /* accent rules under headings                   */

  /* ─── Elevation (NO heavy shadows — clinical paper-on-paper) ─────────── */
  --shadow-sm:  0 1px 2px rgba(17, 32, 46, 0.06);
  --shadow-md:  0 2px 6px rgba(17, 32, 46, 0.08), 0 1px 2px rgba(17,32,46,0.06);
  --shadow-lg:  0 8px 24px rgba(17, 32, 46, 0.10), 0 2px 6px rgba(17,32,46,0.06);
  --shadow-card: 0 1px 0 var(--border-default), 0 2px 8px rgba(17,32,46,0.04);

  /* ─── Layout ─────────────────────────────────────────────────────────── */
  --maxw:        1200px;
  --maxw-prose:   720px;
  --nav-h:        72px;

  /* ─── Motion ─────────────────────────────────────────────────────────── */
  --dur-fast:  120ms;
  --dur:       200ms;
  --dur-slow:  360ms;
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Optional reset & base type — opt in by adding class="md-base" to <body>.
 * ────────────────────────────────────────────────────────────────────────── */
.md-base {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.md-base h1, .md-base h2, .md-base h3, .md-base h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  color: var(--slate-900);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
}
.md-base h1 { font-size: var(--fs-h1); }
.md-base h2 { font-size: var(--fs-h2); }
.md-base h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.md-base h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.md-base p  { margin: 0 0 var(--space-4); max-width: 65ch; }

/* Utility — terminal-style mono uppercase label */
.md-label {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-style: italic;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--federal-crimson);
}

/* Utility — link */
.md-link {
  color: var(--federal-navy-mid);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.md-link:hover { color: var(--federal-crimson); }
.md-link:focus-visible {
  outline: 2px solid var(--federal-crimson);
  outline-offset: 2px;
}