:root {
  /* ---- Color: base ---- */
  --color-bg: #F7F6F1;             /* warm architectural off-white */
  --color-surface: #FFFFFF;
  --color-surface-sunken: #EFEDE6;
  --color-ink: #16212B;            /* sophisticated charcoal-navy */
  --color-ink-soft: #3C4A56;
  --color-line: #DCD8CD;           /* warm neutral hairline */
  --color-line-strong: #C7C2B4;

  /* ---- Color: brand accent (sampled from the bureau's own letterhead) ---- */
  --color-accent: #7E1D2B;         /* institutional maroon */
  --color-accent-dark: #5E1520;
  --color-accent-tint: #F4E7E8;

  /* ---- Color: technical/drafting secondary accent ---- */
  --color-bronze: #A9843C;
  --color-bronze-tint: #F1EADA;

  /* ---- Status ---- */
  --color-active: #3E6B4F;
  --color-active-tint: #E7EFE9;
  --color-expired: #8A5A2B;
  --color-expired-tint: #F3EBDF;

  /* ---- Typography ---- */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', Tahoma, sans-serif;

  --fs-display: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
  --fs-h1: clamp(2rem, 1.6rem + 1.7vw, 3.1rem);
  --fs-h2: clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --fs-h4: 1.15rem;
  --fs-lead: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8.5rem;

  /* ---- Layout ---- */
  --container-width: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;

  /* ---- Elevation (used sparingly) ---- */
  --shadow-sm: 0 1px 2px rgba(22, 33, 43, 0.06), 0 1px 1px rgba(22, 33, 43, 0.04);
  --shadow-md: 0 6px 20px rgba(22, 33, 43, 0.08);
  --shadow-lg: 0 20px 48px rgba(22, 33, 43, 0.14);
}