/* ==========================================================================
   Surface tokens (TESTHUB-1062)

   The second half of the token layer on this branch. `colors_and_type.css` is
   the Raisonance design system and loads immediately before this file; these
   are surface treatments the system does not yet carry.

   Why this is a separate file rather than appended to colors_and_type.css:
   that file ships BYTE-IDENTICAL in the design handoff bundles, and that is
   exactly what makes it safe to treat as canonical and to re-copy when the
   design system is revised. Editing it here would fork it from the copy the
   bundles ship. So it stays untouched and these append after it in the
   cascade instead. Same reasoning as chart-tokens.css on the Reports branch.

   These are NOT Settings-specific. The panel treatment below is the card
   style every surface built since the Reports handoff actually uses, and the
   Results Filter Redesign will want it too. Named for what they are, not for
   the feature that needed them first.

   Panel vs card, because the names are close enough to misuse:

     --rai-radius-card / --rai-shadow-card   the ORIGINAL card. 20px, a heavy
                                             0 4px 4px rgba(0,0,0,.25). Still
                                             correct for legacy surfaces.
     --rai-radius-panel / --rai-shadow-panel the treatment used from the
                                             Reports handoff onward. Tighter
                                             radius, much lighter shadow.

   New surfaces use the panel tokens. Nothing below migrates existing
   hardcoded hex — this introduces the tokens, it does not sweep call sites.
   A whole-file migration is its own ticket.
   ========================================================================== */

:root {
  /* ---------- Panel (the post-Reports card treatment) ---------- */
  --rai-radius-panel:  10px;
  --rai-shadow-panel:  0 2px 5px rgba(0, 0, 0, 0.05);

  /* ---------- Neutral surfaces ---------- */
  /* Hairline is deliberately lighter than --rai-border (#D9D9D9): it separates
     rows inside a panel, where the panel border already carries the weight. */
  --rai-hairline:      #EDF0F2;
  /* Inset "well" behind segmented controls and grouped toggles. */
  --rai-well:          #E7ECEF;
  /* Active item in a left nav rail. */
  --rai-rail-active:   #F1F3F4;
}