/* ============================================================================
   So Money shared design tokens (audit 2026-07-09).
   Loaded via <link href="/assets/tokens.css"> in every portal's <head> BEFORE
   that portal's own <style> block, so a portal's local rules always win —
   this is a GRADUAL-ADOPTION foundation, not a forced restyle. New/refactored
   code should reference var(--sm-*); existing inline hex is left alone until
   touched. Namespaced (--sm-*) to guarantee zero collision with any portal's
   pre-existing custom properties (e.g. management-portal's --primary=#1a3d5c).
   Seed values = the de-facto MAJORITY already used across the portals.
   ========================================================================= */
:root {
  /* Brand + actions */
  --sm-primary:        #185fa5;   /* THE interactive blue — buttons, links, active states */
  --sm-primary-hover:  #134d87;
  /* Unified heading/dark-text navy (CEO J1 decision 2026-07-22): replaces the
     stray #1a3d5c / #1e3a5f / #14233c / #1f2440 / #0F2847 family. Seed value =
     #1e3a5f (the highest-frequency navy already in use). kb-engine's purple is
     retired to --sm-primary as part of the same decision. */
  --sm-text-navy:      #1e3a5f;
  --sm-success:        #0a7a50;   /* the majority green (Save etc.) */
  --sm-success-hover:  #19663f;
  --sm-danger:         #c0392b;
  --sm-danger-soft:    #e05050;
  --sm-warn:           #8a6000;

  /* Text — muted/faint values chosen to PASS WCAG AA (≥4.5:1 on white),
     replacing the failing #888/#999/#aaa content greys. */
  --sm-text:           #1a1a2e;
  --sm-text-muted:     #5a5a5a;   /* ~7.0:1 — secondary content */
  --sm-text-faint:     #767676;   /* ~4.6:1 — the AA floor for small text */

  /* Surfaces */
  --sm-border:         #e0ddd4;
  --sm-bg-muted:       #faf9f6;
  --sm-radius:         8px;
  --sm-radius-sm:      5px;
}

/* ============================================================================
   Platform-wide interaction primitives (CSS/UX remediation 2026-07-21).
   Keyboard-only focus ring: :focus-visible never fires on mouse click, so this
   is invisible to pointer users — safe to apply globally. Portals that used
   `outline:none` may now drop it and inherit this instead.
   ========================================================================= */
:focus-visible { outline: 2px solid var(--sm-primary); outline-offset: 2px; }

/* Shared loading spinner (ported from valuation-engine, the one portal that
   had a real one). Usage: <span class="sm-spinner"></span> next to the
   loading label; inherits size via em if font-scaled containers need it. */
.sm-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid #e5e5e5;
  border-top-color: var(--sm-primary);
  border-radius: 50%;
  animation: sm-spin .8s linear infinite;
  vertical-align: -2px;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }