/* HelaRider shared brand. Keep this after page styles, including role themes. */
:root,
body.dashboard-body[data-role],
body.developer-body,
body.developer-auth {
  --brand-charcoal: #262626;
  --brand-ink: #1a1a1a;
  --brand-orange: #fa5018;
  --brand-orange-ink: #af330b;
  --brand-orange-soft: #fff0e8;
  --brand-yellow: #ffc400;
  --brand-yellow-soft: #fff8db;
  --ink: var(--brand-charcoal);
  --muted: #706a66;
  --line: #eae6e2;
  --canvas: #faf9f7;
  --paper: #fff;
  --green: var(--brand-charcoal);
  --green-dark: var(--brand-orange-ink);
  --green-soft: var(--brand-orange-soft);
  --lime: var(--brand-yellow);
  --amber: var(--brand-orange);
  --chart-muted: #f7ceb9;
  --shadow: 0 16px 48px rgba(38,38,38,.07);
  accent-color: var(--brand-orange-ink);
}
body { color: var(--brand-charcoal); background-color: var(--canvas); }
::selection { color: var(--brand-ink); background: var(--brand-yellow); }
:focus-visible { outline: 3px solid var(--brand-orange-ink); outline-offset: 3px; }
.brand, .sidebar-brand, .portal-header .brand { color: var(--brand-charcoal); }
.brand-mark, .developer-body .brand-mark, .developer-auth .brand-mark {
  color: white; background: var(--brand-charcoal); box-shadow: inset 0 -3px 0 var(--brand-yellow);
}
.portal-intro .portal-title-last { color: var(--brand-orange-ink); }
.role-card { border-top: 3px solid var(--brand-orange); }
.role-card:nth-child(n) .role-mark,
.developer-body .workspace-icon,
.developer-body .help-icon,
.developer-body .dev-step-number { color: var(--brand-orange-ink); background: var(--brand-orange-soft); }
.role-card:hover, .role-card:focus-visible { border-color: var(--brand-orange); }
.role-card-link, .portal-footer-link:hover { color: var(--brand-orange-ink); }
.auth-aside, .developer-auth .auth-aside { background: var(--brand-charcoal); }
.auth-aside::before, .developer-auth .auth-aside::before {
  background: radial-gradient(ellipse at 75% 22%, rgba(250,80,24,.22), transparent 45%), radial-gradient(ellipse at 17% 83%, rgba(255,196,0,.06), transparent 35%);
}
.aside-kicker, .developer-auth .aside-kicker { color: var(--brand-yellow); }
.aside-caption-dot, .developer-auth .aside-caption-dot { background: var(--brand-orange); }
.primary-button { background: var(--brand-charcoal); color: white; }
.primary-button:hover { background: var(--brand-orange-ink); }
.auth-form input:focus { border-color: var(--brand-orange-ink); box-shadow: 0 0 0 3px rgba(250,80,24,.13); }
.nav-link-active, .nav-link-active:hover,
.developer-body .nav-link-active, .developer-body .nav-link-active:hover { color: var(--brand-orange-ink); background: var(--brand-orange-soft); box-shadow: inset 3px 0 var(--brand-orange); }
.nav-link-active .nav-icon, .developer-body .nav-link-active .nav-icon { color: var(--brand-orange-ink); background: white; }
.developer-body .help-card { background: #fffbf8; border-color: var(--line); }
.developer-body .metric-card:first-child .metric-value { color: var(--brand-charcoal); }
.workspace-body { background: var(--canvas); color: var(--brand-charcoal); }
.workspace-body a { color: var(--brand-orange-ink); }
.workspace-body header > a:first-child { color: var(--brand-charcoal); border-bottom: 3px solid var(--brand-orange); }
.workspace-body .eyebrow { color: var(--brand-orange-ink); }
.workspace-body .muted, .workspace-body small { color: var(--muted); }
.workspace-body .money { color: var(--brand-charcoal); }
.workspace-body button, .workspace-body .button { background: var(--brand-charcoal); color: white; border-radius: 25px; }
.workspace-body button:hover, .workspace-body .button:hover { background: var(--brand-orange-ink); }
.workspace-body button.secondary, .workspace-body .button.secondary { background: var(--brand-orange-soft); color: var(--brand-orange-ink); }
.workspace-body nav button { background: #eeeae7; color: var(--brand-charcoal); }
.workspace-body nav button[aria-current=page] { background: var(--brand-orange); color: var(--brand-ink); }
.workspace-body .status { background: var(--brand-orange-soft); color: var(--brand-orange-ink); }
.workspace-body input, .workspace-body select, .workspace-body textarea { color: var(--brand-charcoal); border-color: var(--line); }
.workspace-body .card, .workspace-body form.panel { border-color: var(--line); }
.workspace-body .timeline { border-color: var(--brand-orange); }
.workspace-body .smart-finder { background: var(--brand-orange-soft); border-color: #f7ceb9; border-left: 4px solid var(--brand-orange); }
.workspace-body #notice:not(:empty) { background: var(--brand-yellow-soft); color: var(--brand-charcoal); }