/* ============================================================================
   brand-colors.css — the approved palette and the pill rules that use it.

   THE ONLY approved accent colours are:
     vivid blue, vivid green, vivid yellow, accent orange, black,
     and the grey scale.

   No pastels, no tints, no one-off hex values. If a state needs a colour it
   picks one of these; if none fits, the state doesn't need colour.

   Use the .pill-* classes rather than styling a pill inline, so every pill in
   the app reads the same weight and shape.
   ========================================================================== */
:root {
  /* Accents — full saturation only. */
  --v-blue: #2F6FE4;
  --v-green: #1F9D55;
  --v-yellow: #FFD400;
  --v-orange: #FF3B1F;
  --v-red: #D91E18;

  /* ---- Dashboard widget palette ----------------------------------------
     A second family, used ONLY on the dark dashboard cards. These are data
     colours — one per widget — not status: nothing here means "done" or
     "overdue", so they never collide with the accents above. */
  --w-lime: #C4F244;
  --w-blue: #2F6BFF;
  --w-sky: #58C1F5;
  --w-amber: #FF8A1E;
  --w-sun: #FFD60A;
  --w-silver: #D8D8D8;
  --on-w-lime: #15140F;
  --on-w-blue: #FFFFFF;
  --on-w-sky: #15140F;
  --on-w-amber: #15140F;
  --on-w-sun: #2A1F00;
  --on-w-silver: #15140F;

  /* Text that sits ON an accent. Yellow needs dark ink; the rest take white. */
  --on-blue: #FFFFFF;
  --on-green: #FFFFFF;
  --on-yellow: #2A1F00;
  --on-orange: #FFFFFF;
  --on-red: #FFFFFF;

  /* Neutrals: black and the grey scale.

     ALIGNED WITH styles.css. This scale was a shade off at every step
     (#FCFBF8 vs #FFFFFF, #E4DFD6 vs #DFDFDF, and so on), so a pill grey and a
     table grey never quite matched — two greys that are almost the same read
     as a mistake rather than a distinction. */
  --v-black: #15140F;
  --g-900: #15140F;
  --g-700: #4A4740;
  --g-500: #6B6A63;
  --g-300: #8A8880;
  --g-200: #DFDFDF;
  --g-100: #F5F5F5;
  --g-050: #FFFFFF;
}

/* ---- Pills ----------------------------------------------------------------
   One shape and weight for every state pill. Colour comes from a modifier. */
.pill-base,
.pill-blue, .pill-green, .pill-yellow, .pill-orange, .pill-red, .pill-black, .pill-grey {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  border: none;
  border-radius: 100px;
  padding: 5px 11px;
  white-space: nowrap;
}
.pill-blue { background: var(--v-blue); color: var(--on-blue); }
.pill-green { background: var(--v-green); color: var(--on-green); }
.pill-yellow { background: var(--v-yellow); color: var(--on-yellow); }
.pill-orange { background: var(--v-orange); color: var(--on-orange); }
/* Urgency, and nothing else — keep it distinct from the brand orange. */
.pill-red { background: var(--v-red); color: var(--on-red); }
.pill-black { background: var(--v-black); color: var(--g-050); }
/* Grey is the only "absent" state — nothing has happened yet. */
.pill-grey { background: var(--g-100); color: var(--g-500); }

/* Clickable pills keep the same shape and only brighten. */
button.pill-blue, button.pill-green, button.pill-yellow,
button.pill-orange, button.pill-red, button.pill-black, button.pill-grey { cursor: pointer; }
button.pill-blue:hover, button.pill-green:hover, button.pill-yellow:hover,
button.pill-orange:hover, button.pill-red:hover, button.pill-black:hover { filter: brightness(1.08); }
button.pill-grey:hover { background: var(--g-200); }

/* ---- Buttons -------------------------------------------------------------- */
.btn-accent {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 100px;
  border: none;
  background: var(--v-orange);
  color: var(--on-orange);
  cursor: pointer;
}
.btn-accent:hover { filter: brightness(1.08); }
.btn-accent:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn-ghost {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1px solid var(--g-200);
  background: none;
  color: var(--g-900);
  cursor: pointer;
}
.btn-ghost:hover { border-color: var(--v-orange); color: var(--v-orange); }

/* ---- Unread / attention dot ---------------------------------------------- */
.brand-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v-orange);
  flex: none;
}