/* 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;
  /* The Rev-4 mirror's --canvas (= its --sage-100): the page ground the white
     cards sit on. Same value as --bec-accent-sage-tint, but that one is an
     ACCENT (chips/tints on a surface) — a page canvas is a different job and
     needs its own name, or a future accent re-tint silently repaints the page. */
  --bec-canvas: #DFE5E4;
  --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;

  /* Home page — Rev-4 mockup accent palette (DESIGN_SYSTEM.md §11). Decorative
     accents ONLY (stat-tile rules, category bars on Highlights/Top Resources
     rows) — never use these for real status meaning (approved/pending/failed
     etc.); that stays on --bec-success/--bec-pending/--bec-danger/--bec-info
     above, which several already-shipped pages depend on. Exact hex from the
     Rev-4 mirror artifact's :root (Blue/Sage/Sand tri-color system), so Home's
     accent colors actually match the agreed mockup instead of reusing the
     brighter semantic-status hues, which read as a different, "older" palette
     even once the structure matched. */
  --bec-accent-blue: var(--bec-navy-700);
  --bec-accent-blue-tint: #EAEBF3;
  --bec-accent-sage: #596D6D;
  --bec-accent-sage-soft: #7F9C9B;
  --bec-accent-sage-tint: #DFE5E4;
  --bec-accent-sand: #7A6A56;
  --bec-accent-sand-fill: #E6DDCF;
  --bec-accent-sand-tint: #F5F1EC;

  /* Image placeholders — the Rev-4 mirror's .ph-1..6, hex for hex. These fill
     the artwork slot of a Top Resources tile or an Announcements row when no
     image has been set, and they are always painted under the same
     transparent-to-opaque mask the real photo gets, so an item with no picture
     fades in from the text exactly like one that has a picture rather than
     showing a hard-edged colour block.

     They live here rather than in either component because Blazor CSS
     isolation scopes a .razor.css to its own component: BecResourceTile and
     BecAnnouncementList cannot see each other's rules, and two private copies
     of the same six gradients would drift. Cycled by list position (the tiles
     and rows are admin-authored content with no fixed identity to hang a
     specific colour off), which is what the mirror does too.

     Gradients, not colours — do not use these as a background-color; the value
     is a linear-gradient() and only resolves through background-image. */
  --bec-placeholder-1: linear-gradient(135deg, #DFE6F5, #AAB7DE);
  --bec-placeholder-2: linear-gradient(135deg, #E6DED1, #C7B596);
  --bec-placeholder-3: linear-gradient(135deg, #D9E1E1, #8FADA9);
  --bec-placeholder-4: linear-gradient(135deg, #EFE6D4, #D3BD93);
  --bec-placeholder-5: linear-gradient(135deg, #2A3560, #5468C2);
  --bec-placeholder-6: linear-gradient(135deg, #3A2F57, #7A5BA8);

  /* 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;

  /* Editorial large-numeral display — Home page stat tiles ONLY (documented
     exception, DESIGN_SYSTEM.md §10). Lato is already loaded app-wide at
     weight 300 (App.razor's Google Fonts link), so this adds zero new font
     dependency — it just gives the Home page's stat numbers a named token
     instead of hardcoding "Lato"/34px/300 inline in BecStatTile.razor.css. */
  --font-family-display: "Lato", var(--font-family-base);
  --type-stat-value-size: 34px; --type-stat-value-weight: 300; --type-stat-value-lh: 1;

  /* 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;
}