/* BEC Aspire Portal — design-system handoff tokens (docs/design-system/handoff/tokens.css).
   Scoped to .bec-shell (MainLayoutMS's root), NOT :root — 4 of these lowercase --bec-*
   names (--bec-border, --bec-success, --bec-danger, --bec-info) collide with the
   long-standing legacy --bec-* aliases in tokens/_legacy-mappings.css (frozen for
   MainLayoutLandingPage/PublicVisitorForm/ExternalReferral, which render under
   MainLayoutLanding, not MainLayoutMS). Scoping here keeps those pages untouched while
   every page under MainLayoutMS (@Body) still resolves these vars normally via
   inheritance. See docs/design-system/handoff/DESIGN_SYSTEM.md. */
.bec-shell {
  /* Brand & neutrals */
  --bec-navy-900: #1F2566;
  --bec-navy-700: #2B3484;
  --bec-indigo-400: #6F7FAF;
  --bec-tint-100: #EEF1FB;
  --bec-ink: #24272A;
  --bec-slate: #5A6168;
  --bec-gray: #7A828C;
  --bec-border: #E4E8EF;
  --bec-bg-alt: #F6F8FC;
  --bec-bg-page: #EEF1F6;
  --bec-surface: #FFFFFF;

  /* Semantic / status */
  --bec-pending: #B5842A;
  --bec-pending-bg: #FBF1DF;
  --bec-success: #2E8B57;
  --bec-success-bg: #E7F5EC;
  --bec-danger: #C0392B;
  --bec-danger-bg: #FBEAE8;
  --bec-info: #6F7FAF;
  --bec-info-bg: #EEF1FB;

  /* Type */
  --font-family-base: "Segoe UI", Inter, -apple-system, Helvetica, Arial, sans-serif;
  --type-display-size: 26px; --type-display-weight: 700; --type-display-lh: 1.1;
  --type-wordmark-size: 22px; --type-wordmark-weight: 700; --type-wordmark-lh: 1.1;
  --type-h2-size: 16px; --type-h2-weight: 600; --type-h2-lh: 1.3;
  --type-h3-size: 14px; --type-h3-weight: 600; --type-h3-lh: 1.35;
  --type-eyebrow-size: 11px; --type-eyebrow-weight: 600; --type-eyebrow-lh: 1.2; --type-eyebrow-ls: 0.06em;
  --type-body-size: 13px; --type-body-weight: 400; --type-body-lh: 1.5;
  --type-meta-size: 12px; --type-meta-weight: 400; --type-meta-lh: 1.4;
  --type-caption-size: 10.5px; --type-caption-weight: 500; --type-caption-lh: 1.3; --type-caption-ls: 0.02em;

  /* Spacing (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-16: 64px;

  /* Radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 999px;

  /* Elevation */
  --shadow-resting: 0 1px 2px rgba(16,24,40,.05);
  --shadow-hover: 0 6px 16px rgba(16,24,40,.10);
  --shadow-overlay: 0 12px 32px rgba(16,24,40,.16);

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 72px;
  --content-max-width: 1440px;
  --hit-target-min: 44px;

  /* Motion */
  --ease-standard: ease-out;
  --duration-hover: 150ms;
  --duration-press: 80ms;
}