/* ═══════════════════════════════════════════════════════════════════════════
   SETTLEMENTRADAR — GLOBAL DESIGN SYSTEM
   Inspired by the Ramsey Solutions design blueprint (Report #337061).
   All tokens defined here. Every page inherits from these variables.
   Replaces all ad-hoc dark-theme variables and legacy color patches.

   BRAND MAPPING (from report §18):
     Ramsey --primary (#0073b9 blue)  →  SR --primary (#22c55e green) for CTAs
     Ramsey --navy   (#003561)        →  SR --navy    (#003561) for headings
     Ramsey --yellow (#fcd214)        →  SR --gold    (#fcd214) for highlights

   Last updated: 2026-04-07
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Typography import (DM Sans replaces Gibson; Space Grotesk for headings) ── */
/* Loaded async in layout-head.ejs to avoid render-blocking */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {

  /* ── BRAND COLORS ───────────────────────────────────────────────────────── */

  /* Primary — SettlementRadar green (mapped from Ramsey blue for CTAs) */
  --primary:        #22c55e;   /* emerald-500 — primary CTA, links, accents */
  --primary-dark:   #16a34a;   /* emerald-600 — hover state */
  --primary-deeper: #15803d;   /* emerald-700 — active/pressed state */
  --primary-light:  #86efac;   /* emerald-300 — light accents, backgrounds */
  --primary-bg:     #f0fdf4;   /* emerald-50  — very light tint for section bgs */
  --primary-subtle: rgba(34, 197, 94, 0.08); /* ghost fills, tag bgs */
  --primary-border: rgba(34, 197, 94, 0.20); /* ghost borders */

  /* Navy — from Ramsey #003561, used for headings and dark text */
  --navy:           #003561;   /* Ramsey dark navy — section headings, hero text */
  --navy-deep:      #002342;   /* deepest navy — darkest hero backgrounds */
  --navy-mid:       #004477;   /* mid navy — hero section backgrounds */

  /* Gold/Yellow — from Ramsey #fcd214 — highlights, badges, accent elements */
  --gold:           #fcd214;   /* Ramsey yellow — badges, CTAs on dark bg */
  --gold-hover:     #ffe45e;   /* gold hover state */
  --gold-dim:       rgba(252, 210, 20, 0.15); /* ghost fill for gold elements */

  /* ── GRAY SCALE (9-shade, matching Ramsey report §3) ───────────────────── */
  --gray-10:  #f5f7f8;   /* page background, disabled states */
  --gray-20:  #e8eced;   /* borders, table dividers, disabled bg */
  --gray-30:  #d5d9db;   /* input borders (disabled) */
  --gray-40:  #b6bec2;   /* input borders (default), placeholder text */
  --gray-50:  #8e999e;   /* subdued text, icons */
  --gray-60:  #69757a;   /* footnotes, captions */
  --gray-70:  #495257;   /* subdued body text */
  --gray-80:  #333a3d;   /* dark text */
  --gray-90:  #1f2426;   /* base text (near-black) */

  /* Tailwind-compatible gray aliases (backward compat for existing components) */
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;

  /* ── SEMANTIC COLOR TOKENS ──────────────────────────────────────────────── */
  --text-base:    #1f2426;   /* default body text (Ramsey gray-90) */
  --text-subdued: #495257;   /* secondary text (Ramsey gray-70) */
  --text-muted:   #69757a;   /* muted/caption text (Ramsey gray-60) */
  --text-link:    #22c55e;   /* link default (mapped from Ramsey blue) */
  --text-link-hover: #16a34a; /* link hover */
  --text-disabled: #8e999e;  /* disabled text */
  --text-on-dark:  #ffffff;  /* text on dark/colored backgrounds */
  --text-on-gold:  #1f2426;  /* dark text on gold/yellow (high contrast) */

  /* ── SURFACE / BACKGROUND TOKENS ───────────────────────────────────────── */
  --bg-page:    #f5f7f8;   /* global page background (Ramsey gray-10) */
  --bg-white:   #ffffff;   /* card surfaces, content areas */
  --bg-alt:     #f5f7f8;   /* alternating section backgrounds */
  --bg-dark:    #003561;   /* dark hero/section backgrounds (navy) */
  --bg-darkest: #002342;   /* deepest dark sections */

  /* ── STATE COLORS ───────────────────────────────────────────────────────── */
  --color-error:    #cc392f;   /* Ramsey error red */
  --color-success:  #1b8533;   /* Ramsey success green */
  --color-warning:  #fcd214;   /* gold for warnings */
  --red-500:   #ef4444;        /* backward compat */
  --red-100:   #fee2e2;
  --orange-500: #f97316;

  /* ── LEGACY ALIASES (backward compat — do not add new vars with these names) ── */
  --green-accent:   var(--primary);
  --green-bright:   var(--primary);
  --green-light:    var(--primary-light);
  --green-deep:     #ffffff;       /* light mode: was formerly dark bg color */
  --green-dark:     #f9fafb;
  --green-mid:      #f3f4f6;
  --blue-accent:    #2563eb;       /* kept for data visualizations */

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */

  /* Font families */
  --font-heading: 'Space Grotesk', 'DM Sans', Arial, sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Type scale — Ramsey report §2 adapted for SettlementRadar */
  /* Mobile → Desktop (clamp) */
  --text-display-xl:  clamp(3.75rem, 8vw, 6rem);    /* 60px → 96px | H1 max hero */
  --text-display-lg:  clamp(3rem,    6vw, 4.5rem);   /* 48px → 72px | Page hero */
  --text-display-md:  clamp(2.5rem,  5vw, 3.75rem);  /* 40px → 60px | Section hero */
  --text-display-sm:  clamp(2rem,    4vw, 3rem);     /* 32px → 48px | Sub-hero */
  --text-subtitle:    clamp(1.25rem, 2vw, 1.75rem);  /* 20px → 28px | Hero subtext */
  --text-heading-lg:  clamp(1.5rem,  2.5vw, 2.125rem); /* 24px → 34px | Section titles */
  --text-heading-md:  clamp(1.25rem, 2vw,   1.75rem);  /* 20px → 28px | H3 */
  --text-heading-sm:  clamp(1.125rem,1.5vw, 1.5rem);   /* 18px → 24px | H4 */
  --text-heading-xs:  clamp(1rem,    1.2vw, 1.25rem);  /* 16px → 20px | H5 */
  --text-body-lg:     1.25rem;   /* 20px — lead body text */
  --text-body-md:     1.125rem;  /* 18px — default body */
  --text-body-sm:     1rem;      /* 16px — captions, meta, small print */
  --text-body-xs:     0.875rem;  /* 14px — legal, footnotes */

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Line heights */
  --lh-display:  1.1;    /* tightest — large display text */
  --lh-heading:  1.25;   /* headings */
  --lh-body:     1.6;    /* comfortable reading */
  --lh-relaxed:  1.75;   /* long-form prose */

  /* Readable prose width */
  --prose-width: 700px;

  /* ── SPACING (8px base unit — Ramsey report §5) ─────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;
  --space-5xl:  160px;

  /* Section vertical padding */
  --section-padding-sm:   clamp(2rem,  4vw, 3rem);    /* 32px → 48px */
  --section-padding-md:   clamp(3rem,  6vw, 4rem);    /* 48px → 64px */
  --section-padding-lg:   clamp(3rem,  7vw, 6rem);    /* 48px → 96px */

  /* ── GRID SYSTEM ─────────────────────────────────────────────────────────── */
  --grid-cols:       12;
  --grid-gap:        32px;           /* Ramsey: 32px between columns */
  --grid-gap-sm:     16px;           /* mobile gap */
  --max-width:       1200px;         /* content container max-width */
  --max-width-prose: 700px;          /* article / long-form content */
  --max-width-narrow: 900px;         /* narrow page layouts */

  /* Container horizontal padding */
  --container-px:    clamp(1rem, 4vw, 2rem);

  /* ── BORDER RADIUS ───────────────────────────────────────────────────────── */
  --radius-sm:   4px;    /* buttons, inputs, small chips */
  --radius:      8px;    /* small cards, key-takeaways boxes */
  --radius-md:   12px;   /* medium cards */
  --radius-lg:   16px;   /* main content cards (Ramsey spec) */
  --radius-xl:   20px;   /* large feature cards */
  --radius-pill: 100px;  /* tags, badges, pills */

  /* Backward compat aliases */
  --radius-btn:  var(--radius-sm);
  --radius-card: var(--radius-lg);

  /* ── BORDERS ─────────────────────────────────────────────────────────────── */
  --border-default:  #b6bec2;                      /* Ramsey gray-40 */
  --border-light:    #e8eced;                      /* Ramsey gray-20 */
  --border-focus:    var(--primary);
  --border-accent:   rgba(34, 197, 94, 0.20);

  /* ── SHADOWS (shadow-only, no borders — Ramsey design philosophy) ───────── */
  --shadow-sm:   0 1px 2px 0  rgba(31, 36, 38, 0.08);
  --shadow:      0 2px 4px 0  rgba(31, 36, 38, 0.10);
  --shadow-md:   0 4px 16px 0 rgba(31, 36, 38, 0.12);   /* standard card */
  --shadow-lg:   0 6px 16px 0 rgba(31, 36, 38, 0.15);   /* feature cards */
  --shadow-xl:   0 8px 24px 0 rgba(31, 36, 38, 0.18);   /* hero cards, modals */
  --shadow-2xl:  0 16px 40px 0 rgba(31, 36, 38, 0.20);  /* elevated modals */
  /* Backward compat */
  --shadow-card:     var(--shadow-md);
  --shadow-elevated: var(--shadow-xl);

  /* ── TRANSITIONS / ANIMATIONS ────────────────────────────────────────────── */
  /* Ramsey cubic-bezier (snappy overshoot — same across all interactive elements) */
  --ease-cta:  cubic-bezier(0.19, 1, 0.22, 1);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);

  --transition-btn:   background-color 0.3s var(--ease-cta),
                      border-color     0.3s var(--ease-cta),
                      color            0.3s var(--ease-cta),
                      box-shadow       0.3s var(--ease-cta);
  --transition-card:  box-shadow 0.2s var(--ease-std),
                      transform  0.2s var(--ease-std);
  --transition-link:  color 0.2s var(--ease-std);
  --transition-menu:  opacity    0.2s ease,
                      transform  0.2s ease,
                      visibility 0s   0.2s;

  /* ── HEADER ──────────────────────────────────────────────────────────────── */
  --header-height: 96px;  /* two-row: brand bar 52px + nav strip 44px (desktop) */
  --header-height-mobile: 52px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. GLOBAL TYPOGRAPHY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Smooth font rendering globally */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);   /* 18px default */
  line-height: var(--lh-body);
  color: var(--text-base);
  background-color: var(--bg-white);
  overflow-x: hidden;
}

/* Heading defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--text-base);
}

h1 { font-size: var(--text-display-lg); font-weight: var(--fw-bold);  }
h2 { font-size: var(--text-heading-lg); font-weight: var(--fw-semibold); }
h3 { font-size: var(--text-heading-md); font-weight: var(--fw-semibold); }
h4 { font-size: var(--text-heading-sm); font-weight: var(--fw-semibold); }
h5 { font-size: var(--text-heading-xs); font-weight: var(--fw-semibold); }
h6 { font-size: var(--text-body-sm);    font-weight: var(--fw-semibold); }

p {
  margin-bottom: 1em;
  max-width: var(--prose-width);
  line-height: var(--lh-body);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-link);
}
a:hover {
  color: var(--text-link-hover);
}

strong, b { font-weight: var(--fw-semibold); }

small, .text-xs { font-size: var(--text-body-xs); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. GRID & LAYOUT SYSTEM
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Container */
.ds-container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.ds-container--narrow {
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.ds-container--prose {
  max-width: var(--max-width-prose);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* 12-column CSS grid */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

/* Common span helpers */
.ds-col-12 { grid-column: span 12; }
.ds-col-9  { grid-column: span 12; } /* mobile: full width */
.ds-col-8  { grid-column: span 12; }
.ds-col-6  { grid-column: span 12; }
.ds-col-4  { grid-column: span 12; }
.ds-col-3  { grid-column: span 12; }

/* Section padding helpers */
.ds-section {
  padding-block: var(--section-padding-md);
}
.ds-section--sm  { padding-block: var(--section-padding-sm); }
.ds-section--lg  { padding-block: var(--section-padding-lg); }

/* Responsive breakpoints — Ramsey design system §5 */
/* sm: 600px */
@media (min-width: 37.5em) {
  .ds-col-6 { grid-column: span 6; }
  .ds-col-4 { grid-column: span 6; }
  .ds-col-3 { grid-column: span 6; }
  .ds-grid  { gap: var(--grid-gap); }
}

/* md: 900px */
@media (min-width: 56.25em) {
  .ds-col-9 { grid-column: span 9; }
  .ds-col-8 { grid-column: span 8; }
  .ds-col-6 { grid-column: span 6; }
  .ds-col-4 { grid-column: span 4; }
  .ds-col-3 { grid-column: span 6; }
}

/* lg: 1200px (desktop breakpoint from Ramsey) */
@media (min-width: 75em) {
  .ds-col-3 { grid-column: span 3; }
  .ds-col-4 { grid-column: span 4; }
  .ds-col-6 { grid-column: span 6; }
  .ds-col-8 { grid-column: span 8; }
  .ds-col-9 { grid-column: span 9; }
}

/* xl: 1500px */
@media (min-width: 93.75em) {
  :root { --max-width: 1280px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. BUTTON SYSTEM (4 variants, Ramsey spec §4)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Base button reset */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: var(--transition-btn);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

/* Sizes */
.ds-btn--compact {
  font-size: var(--text-body-xs); /* 14px */
  padding: 6px 16px;
  line-height: 1;
  min-height: 32px;
}
.ds-btn--standard {
  font-size: var(--text-body-sm); /* 16px */
  padding: 8px 20px;
  min-height: 40px;
}
.ds-btn--comfortable {
  font-size: var(--text-body-md); /* 18px */
  padding: 12px 28px;
  min-height: 48px;
}

/* DEFAULT SIZE = comfortable */
.ds-btn:not(.ds-btn--compact):not(.ds-btn--standard):not(.ds-btn--comfortable) {
  font-size: var(--text-body-sm);
  padding: 10px 24px;
  min-height: 44px;
}

/* Variant 1: Primary — green fill (default CTA) */
.ds-btn--primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}
.ds-btn--primary:hover,
.ds-btn--primary:focus-visible {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #ffffff;
}
.ds-btn--primary:active {
  background-color: var(--primary-deeper);
  border-color: var(--primary-deeper);
}

/* Variant 2: Secondary/Outlined — transparent with green border */
.ds-btn--secondary {
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary-dark);
}
.ds-btn--secondary:hover,
.ds-btn--secondary:focus-visible {
  background-color: var(--primary-subtle);
  border-color: var(--primary-dark);
  color: var(--primary-dark);
}

/* Variant 3: Ghost — transparent, no border (white/dark-bg contexts) */
.ds-btn--ghost {
  background-color: transparent;
  border-color: currentColor;
  color: var(--primary);
}
.ds-btn--ghost:hover,
.ds-btn--ghost:focus-visible {
  background-color: var(--primary-subtle);
}

/* Variant 4: Text-only — inline text link button */
.ds-btn--text {
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  padding: 0;
  color: var(--primary);
  box-shadow: 0 2px 0 transparent;
  min-height: auto;
  font-size: inherit;
}
.ds-btn--text:hover,
.ds-btn--text:focus-visible {
  box-shadow: 0 2px 0 currentColor;
  color: var(--primary-dark);
}

/* Gold variant — high contrast on dark / navy backgrounds */
.ds-btn--gold {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--text-on-gold);
}
.ds-btn--gold:hover,
.ds-btn--gold:focus-visible {
  background-color: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--text-on-gold);
}

/* White variant — on dark/colored backgrounds */
.ds-btn--white {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--navy);
}
.ds-btn--white:hover,
.ds-btn--white:focus-visible {
  background-color: var(--gray-10);
}

/* Disabled state */
.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  background-color: var(--gray-20) !important;
  border-color: var(--gray-20) !important;
  color: var(--gray-50) !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. CARD SYSTEM (Ramsey spec §6 — shadow-only, no visible borders)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ds-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-lg);   /* 16px — Ramsey spec */
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Elevation levels */
.ds-card--low      { box-shadow: var(--shadow);    }   /* article previews */
.ds-card--medium   { box-shadow: var(--shadow-lg); }   /* feature cards */
.ds-card--high     { box-shadow: var(--shadow-xl); }   /* hero cards, modals */

/* Clickable card — adds hover lift */
.ds-card--clickable {
  cursor: pointer;
  transition: var(--transition-card);
}
.ds-card--clickable:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

/* Card content padding */
.ds-card-body {
  padding: var(--space-lg);        /* 24px */
}
.ds-card-body--sm { padding: var(--space-md); }    /* 16px */
.ds-card-body--lg { padding: var(--space-xl); }    /* 32px */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. FORM INPUTS (Ramsey spec §10)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ds-input {
  display: block;
  width: 100%;
  background-color: var(--bg-white);
  border: 1px solid var(--gray-40);   /* Ramsey: #b6bec2 */
  border-radius: var(--radius-sm);
  color: var(--text-base);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);     /* 16px — prevents iOS auto-zoom */
  padding: 8px 16px;
  height: 44px;
  transition: border-color 0.2s var(--ease-std),
              box-shadow   0.2s var(--ease-std);
}

.ds-input::placeholder {
  color: var(--gray-50);
}

.ds-input:focus,
.ds-input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.ds-input:disabled {
  background-color: var(--gray-10);
  border-color: var(--gray-30);
  color: var(--gray-50);
  cursor: not-allowed;
}

/* Textarea */
.ds-textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
  padding: 12px 16px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. ACCENT LINE (Ramsey signature — 4px × 72px bar under headings)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ds-accent-line {
  display: block;
  width: 72px;
  height: 4px;
  background-color: var(--primary);
  border-radius: 2px;
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.ds-accent-line--gold   { background-color: var(--gold); }
.ds-accent-line--white  { background-color: #ffffff; }
.ds-accent-line--center { margin-inline: auto; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. SECTION BACKGROUNDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* White section (default) */
.ds-section--white  { background-color: var(--bg-white); }

/* Light gray alternate section */
.ds-section--alt    { background-color: var(--bg-alt); }

/* Primary-tinted section */
.ds-section--tinted { background-color: var(--primary-bg); }

/* Dark navy section (hero, CTA banners) */
.ds-section--dark {
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
}
.ds-section--dark h1,
.ds-section--dark h2,
.ds-section--dark h3,
.ds-section--dark h4,
.ds-section--dark h5,
.ds-section--dark h6 {
  color: #ffffff;
}
.ds-section--dark p {
  color: rgba(255, 255, 255, 0.85);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. KEY TAKEAWAYS BOX (Ramsey article pattern — §7)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ds-takeaways {
  background-color: var(--bg-alt);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-xl);
  margin-block: var(--space-xl);
}

.ds-takeaways-title {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-takeaways ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ds-takeaways li {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--text-base);
  padding-left: 1.25em;
  position: relative;
}
.ds-takeaways li::before {
  content: '•';
  color: var(--primary);
  font-weight: var(--fw-bold);
  position: absolute;
  left: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. BADGE / TAG CHIPS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-body-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.ds-badge--primary {
  background-color: var(--primary-subtle);
  color: var(--primary-dark);
  border: 1px solid var(--primary-border);
}
.ds-badge--gold {
  background-color: var(--gold-dim);
  color: #7a5c00;
  border: 1px solid rgba(252, 210, 20, 0.3);
}
.ds-badge--gray {
  background-color: var(--gray-20);
  color: var(--gray-70);
}
.ds-badge--navy {
  background-color: var(--navy);
  color: #ffffff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. ACCESSIBILITY
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* WCAG 2.1 AA — 3px solid focus ring on all interactive elements */
:focus-visible {
  outline: 3px solid var(--primary) !important;
  outline-offset: 2px !important;
}

/* Skip nav */
.ds-skip-nav {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ds-skip-nav:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background: var(--primary);
  color: #ffffff;
  border-radius: var(--radius-sm);
  z-index: 9999;
}

/* Visually hidden (screen-reader accessible) */
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. READING PROGRESS BAR (Ramsey article pattern — §7)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ds-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background-color: var(--primary);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. UTILITY CLASSES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Text colors */
.ds-text-primary  { color: var(--primary) !important; }
.ds-text-navy     { color: var(--navy) !important; }
.ds-text-gold     { color: var(--gold) !important; }
.ds-text-muted    { color: var(--text-muted) !important; }
.ds-text-subdued  { color: var(--text-subdued) !important; }
.ds-text-white    { color: #ffffff !important; }

/* Background colors */
.ds-bg-white      { background-color: var(--bg-white) !important; }
.ds-bg-alt        { background-color: var(--bg-alt) !important; }
.ds-bg-primary    { background-color: var(--primary) !important; }
.ds-bg-navy       { background-color: var(--navy) !important; }
.ds-bg-tinted     { background-color: var(--primary-bg) !important; }

/* Font weights */
.ds-fw-regular  { font-weight: var(--fw-regular)  !important; }
.ds-fw-medium   { font-weight: var(--fw-medium)   !important; }
.ds-fw-semibold { font-weight: var(--fw-semibold) !important; }
.ds-fw-bold     { font-weight: var(--fw-bold)     !important; }

/* Text sizes */
.ds-text-xl   { font-size: var(--text-body-lg) !important; }
.ds-text-md   { font-size: var(--text-body-md) !important; }
.ds-text-sm   { font-size: var(--text-body-sm) !important; }
.ds-text-xs   { font-size: var(--text-body-xs) !important; }

/* Spacing */
.ds-mt-sm  { margin-top:    var(--space-sm)  !important; }
.ds-mt-md  { margin-top:    var(--space-md)  !important; }
.ds-mt-lg  { margin-top:    var(--space-lg)  !important; }
.ds-mt-xl  { margin-top:    var(--space-xl)  !important; }
.ds-mb-sm  { margin-bottom: var(--space-sm)  !important; }
.ds-mb-md  { margin-bottom: var(--space-md)  !important; }
.ds-mb-lg  { margin-bottom: var(--space-lg)  !important; }
.ds-mb-xl  { margin-bottom: var(--space-xl)  !important; }

/* Display helpers */
.ds-flex          { display: flex !important; }
.ds-flex-center   { display: flex; align-items: center; justify-content: center; }
.ds-flex-between  { display: flex; align-items: center; justify-content: space-between; }
.ds-flex-col      { display: flex; flex-direction: column; }
.ds-gap-sm        { gap: var(--space-sm) !important; }
.ds-gap-md        { gap: var(--space-md) !important; }
.ds-gap-lg        { gap: var(--space-lg) !important; }
.ds-gap-xl        { gap: var(--space-xl) !important; }

/* Radius */
.ds-rounded-sm    { border-radius: var(--radius-sm) !important; }
.ds-rounded       { border-radius: var(--radius)    !important; }
.ds-rounded-lg    { border-radius: var(--radius-lg) !important; }
.ds-rounded-pill  { border-radius: var(--radius-pill) !important; }

/* Shadows */
.ds-shadow-sm     { box-shadow: var(--shadow-sm) !important; }
.ds-shadow        { box-shadow: var(--shadow)    !important; }
.ds-shadow-md     { box-shadow: var(--shadow-md) !important; }
.ds-shadow-lg     { box-shadow: var(--shadow-lg) !important; }
.ds-shadow-xl     { box-shadow: var(--shadow-xl) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. RESPONSIVE MOBILE OVERRIDES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 37.4375em) { /* < 600px */
  :root {
    --header-height: var(--header-height-mobile);
    --grid-gap: var(--grid-gap-sm);
  }

  body {
    font-size: var(--text-body-sm); /* 16px on mobile */
  }

  .ds-grid {
    grid-template-columns: 1fr;
    gap: var(--grid-gap-sm);
  }

  /* All columns go full-width on mobile */
  [class*="ds-col-"] {
    grid-column: span 1;
  }
}

@media (max-width: 56.24375em) { /* < 900px */
  h1 { font-size: clamp(2rem, 6vw, 3rem); }
  h2 { font-size: clamp(1.5rem, 4vw, 2.125rem); }
  h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
}