/* =========================================================================
   National Home Fund — Brand override (loaded AFTER carbon.css + app.css)

   The platform ships with an IBM Carbon theme whose accent is blue. NHF's
   brand is RED on a WHITE background. Rather than forking carbon.css, we simply
   retarget the design tokens the shell already reads. Overriding the blue-60/70/80
   ramp catches buttons, avatars, the logo mark, tertiary/ghost buttons and the
   checkbox accent in one place; the interactive/focus/link tokens catch the rest.

   Background stays white (Carbon's --cds-background is already #ffffff).
   The "info" support colour is intentionally left blue so informational states
   stay visually distinct from the red brand.
   ========================================================================= */
:root {
  /* Brand accent ramp → Carbon red */
  --cds-blue-60: #da1e28;   /* primary brand red   (red-60) */
  --cds-blue-70: #a2191f;   /* hover               (red-70) */
  --cds-blue-80: #750e13;   /* active              (red-80) */
  --cds-blue-50: #fa4d56;   /* light accent        (red-50) */
  --cds-blue-40: #ff8389;   /* lighter accent      (red-40) */

  /* Semantic interaction tokens → red */
  --cds-interactive: #da1e28;
  --cds-focus: #da1e28;
  --cds-link-primary: #da1e28;
  --cds-link-primary-hover: #a2191f;

  /* NHF brand variables usable by app views */
  --nhf-red: #da1e28;
  --nhf-red-dark: #a2191f;
  --nhf-red-darker: #750e13;
  --nhf-red-soft: #fff1f1;   /* very light red wash for subtle fills */
  --nhf-white: #ffffff;
}

/* Global top header keeps its dark bar (Carbon UI shell), but the brand mark
   and the app name accent read as NHF red. */
.workos-header__name .mark { background: var(--nhf-red); }

/* A thin red rule under the global header reinforces the brand without
   disturbing the white content canvas. */
.workos-header { border-bottom: 1px solid var(--nhf-red); }

/* Selected side-nav item gets a red active bar (Carbon uses a left border). */
.workos-sidenav__link--active { box-shadow: inset 3px 0 0 0 var(--nhf-red); }

/* Auth screens: brand the product mark red on the white sign-in canvas. */
.workos-auth__logo .mark { background: var(--nhf-red); color: #fff; }
/* The dark sign-in aside gets an NHF red wash instead of the default blue-ish one. */
.workos-auth__brand { background: linear-gradient(160deg, #a2191f 0%, #750e13 100%); }

/* Ensure any lingering hard-coded Carbon blue on primary CTAs reads red. */
.cds-btn--primary { background: var(--nhf-red); }
.cds-btn--primary:hover { background: var(--nhf-red-dark); }
.cds-btn--primary:active { background: var(--nhf-red-darker); }