/*
 * ARC Power brand overlay (W1) — tokens over Phoenix's theme, never an edit to it.
 *
 * Loaded by base.html immediately after Phoenix's theme.min.css and user.min.css, so every
 * rule here wins without !important where the theme allows. Values are the measured tokens
 * in the vault's architecture/brand-tokens.md; nothing here is a new design decision
 * (@nav: "do not restyle beyond the tokens").
 *
 * Headings, the navigation and avatar initials carry Poppins; body text stays Phoenix's
 * Nunito Sans stack, because Poppins at body sizes fights the theme's spacing
 * (platform-templates 0.4).
 */

:root,
[data-bs-theme=light] {
  /* The tokens. */
  --arc-red: #FF592F;
  --arc-red-rgb: 255, 89, 47;
  --arc-charcoal: #333333;
  --arc-grey: #999999;
  --arc-light: #EBEBEB;
  --arc-white: #FFFFFF;
  --arc-sage: #67825F;
  --arc-yellow: #EAB720;
  --arc-font-brand: "Poppins", var(--phoenix-font-sans-serif);

  /* Primary is the ARC red: actions, active states, the current-stage border. */
  --phoenix-primary: var(--arc-red);
  --phoenix-primary-rgb: var(--arc-red-rgb);
  --phoenix-primary-bg-subtle: #FFE3DB;
  --phoenix-primary-border-subtle: #FFAB95;
  --phoenix-primary-text-emphasis: #C23A17;

  /* Charcoal text. Links read as text and turn red on hover. */
  --phoenix-body-color: var(--arc-charcoal);
  --phoenix-body-highlight-color: var(--arc-charcoal);
  --phoenix-emphasis-color: var(--arc-charcoal);
  --phoenix-link-color: var(--arc-charcoal);
  --phoenix-link-color-rgb: 51, 51, 51;
  --phoenix-link-hover-color: var(--arc-red);
  --phoenix-link-hover-color-rgb: var(--arc-red-rgb);

  /* RAG, brand-mapped (brand-tokens suggestion): on track = sage, at risk = yellow,
     off track = the ARC red. Chips and progress bars both follow. */
  --phoenix-success: var(--arc-sage);
  --phoenix-success-rgb: 103, 130, 95;
  --phoenix-success-bg-subtle: #E3EAE1;
  --phoenix-success-border-subtle: #B3C2AE;
  --phoenix-success-text-emphasis: #4E6448;

  --phoenix-warning: var(--arc-yellow);
  --phoenix-warning-rgb: 234, 183, 32;
  --phoenix-warning-bg-subtle: #FBF1D2;
  --phoenix-warning-border-subtle: #F2D57F;
  --phoenix-warning-text-emphasis: #8A6A0E;

  --phoenix-danger: var(--arc-red);
  --phoenix-danger-rgb: var(--arc-red-rgb);
  --phoenix-danger-bg-subtle: #FFE3DB;
  --phoenix-danger-border-subtle: #FFAB95;
  --phoenix-danger-text-emphasis: #C23A17;
}

/* Buttons: the red primary action. */
.btn-primary {
  --phoenix-btn-color: var(--arc-white);
  --phoenix-btn-bg: var(--arc-red);
  --phoenix-btn-border-color: var(--arc-red);
  --phoenix-btn-hover-color: var(--arc-white);
  --phoenix-btn-hover-bg: #E8461D;
  --phoenix-btn-hover-border-color: #E8461D;
  --phoenix-btn-active-color: var(--arc-white);
  --phoenix-btn-active-bg: #D13D17;
  --phoenix-btn-active-border-color: #D13D17;
  --phoenix-btn-disabled-bg: var(--arc-red);
  --phoenix-btn-disabled-border-color: var(--arc-red);
}

/* Poppins for headings. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--arc-font-brand);
  font-weight: 600;
}

/* The top bar: charcoal, the white mark, the active item underlined in red. */
.arc-navbar {
  background-color: var(--arc-charcoal);
  border-bottom: 1px solid #444444;
}

.arc-navbar-mark {
  height: 28px;
  width: auto;
}

.arc-wordmark {
  color: var(--arc-white);
  font-family: var(--arc-font-brand);
  font-weight: 600;
  font-size: 1.05rem;
}

.arc-navbar .navbar-nav .nav-link {
  color: #D6D6D6;
  font-family: var(--arc-font-brand);
  font-weight: 500;
}

.arc-navbar .navbar-nav .nav-link:hover,
.arc-navbar .navbar-nav .nav-link:focus {
  color: var(--arc-white);
}

.arc-navbar .navbar-nav .nav-link.active {
  color: var(--arc-white);
  box-shadow: inset 0 -3px 0 var(--arc-red);
}

.arc-navbar .text-body-tertiary {
  color: #BDBDBD !important;
}

/* Avatars: the photo, or initials on the ARC red. */
.arc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--arc-red);
  color: var(--arc-white);
  font-family: var(--arc-font-brand);
  font-weight: 600;
  line-height: 1;
}

.arc-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arc-avatar-s {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.625rem;
}

.arc-avatar-m {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.875rem;
}

/* The dashboard tile, where W3 made the person the headline: about a third of the
   tile's 15rem width, so a face is what you see first when scanning a row. */
.arc-avatar-l {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.5rem;
}

/* Sign-in: the full lockup above the card. */
.arc-auth-lockup {
  width: 100%;
  max-width: 16rem;
  height: auto;
}

/* A dashboard stage tile. Was style="width: 15rem" on every tile — a layout constant
   repeated per tile, which the legal layout directive (2026-10-16, rule 6) asks no page
   to do. Inline style stays only for data, such as a progress bar's width. */
.arc-stage-tile {
  width: 15rem;
}

/* The thin progress bars on a tile: budget spent, tasks done. */
.arc-progress-thin {
  height: 4px;
}