/* ============================================================
   halos.css — reusable .has-halo accent glow primitive
   ============================================================
   Owns the reusable .has-halo three-layer accent glow primitive,
   used on the compose modal, free-space modal, and other
   "branded surface" elements that want a soft accent halo.

   Per-feature hover halos (e.g. .notification-row:hover,
   .messages-row:hover) live in their respective feature CSS
   files and reference --color-halo-rgb directly from tokens.css.

   Loaded after bootstrap_bridges.css so that .has-halo
   specifically overrides Bootstrap's default modal box-shadow.

   Reference: markdown/design/DESIGN_DECISIONS_CSS_REFACTOR.md
   ============================================================ */

/* ============================================================
   Halo treatment — reusable accent glow (pr16b wave 2)
   ============================================================
   Apply .has-halo to any element to give it a soft three-layer
   accent glow: a tight inner ring at the border, a soft mid
   glow, and a far diffuse halo. The glow fades to nothing
   within ~60px.

   Color via the --halo-color CSS variable. Defaults to the
   active accent (--bs-primary-rgb), which theme-switches with
   light/dark mode automatically.

   To use a different color, set --halo-color inline or via a
   modifier class. The variable holds an "R, G, B" triplet (no
   parentheses, no "rgb(...)") because rgba() in the box-shadow
   composes it with alpha. Example:
       <div class="has-halo" style="--halo-color: 220, 38, 38;">
   for a red halo. Easier as a class:
       .has-halo-danger { --halo-color: var(--bs-danger-rgb); }

   Currently applied to: #composeModal, #freeSpaceModal.

   Note for modals specifically: Bootstrap's .modal-content is the
   element that paints the modal surface, so the halo selector
   reaches into .modal-content. For other element types this
   inner selector won't apply — the rule below adds a top-level
   shadow declaration that lives on .has-halo itself, so .has-halo
   on (say) a button or card just works.
   ============================================================ */

.has-halo {
    /* The variable doubles as the on-class default. Per-instance
       overrides cascade through normally. app1 (round 5): defaults
       to --color-halo-rgb (light Matrix green in dark mode) so
       halos glow visibly against pure-black bg. */
    --halo-color: var(--color-halo-rgb);

    /* Top-level halo — applies when .has-halo is on a regular
       element (button, card, etc.). For modals, the inner
       .modal-content rule below paints the halo instead because
       Bootstrap renders modal chrome on .modal-content, not on
       the .modal wrapper. */
    box-shadow:
        0 0 0 1px rgba(var(--halo-color), 0.5),
        0 0 24px 4px rgba(var(--halo-color), 0.25),
        0 0 60px 8px rgba(var(--halo-color), 0.12);
}

/* Modal-specific descendant: when .has-halo is on a .modal element,
   paint the halo on the inner .modal-content instead so the glow
   wraps the visible modal surface, not the invisible wrapper. */
.modal.has-halo .modal-content {
    box-shadow:
        0 0 0 1px rgba(var(--halo-color), 0.5),
        0 0 24px 4px rgba(var(--halo-color), 0.25),
        0 0 60px 8px rgba(var(--halo-color), 0.12);
}

/* If .has-halo is on a .modal element, suppress the top-level
   box-shadow — the .modal wrapper is a transparent positioning
   shell, so painting a shadow on it would look strange. The
   descendant rule above handles that case. */
.modal.has-halo {
    box-shadow: none;
}

/* ---- Halo variants -----------------------------------------
   Modifier classes that override --halo-color to give the halo
   semantic meaning beyond "this is a branded surface."
   .has-halo-blue is used by notifications (read/unread) — the
   blue distinguishes "something is waiting for you" from the
   brand-accent halos used on commitment surfaces. */
.has-halo-blue {
    --halo-color: 13, 110, 253;
    box-shadow:
        0 0 0 1px rgba(var(--halo-color), 0.5),
        0 0 24px 4px rgba(var(--halo-color), 0.25),
        0 0 60px 8px rgba(var(--halo-color), 0.12);
}