/* ============================================================
   SkinSignal / css / surface-tokens.css
   The material system the product pages share: the floor, a panel raised
   off it, a tile raised off a panel, and the two edges that light them.

   ONE HOME, LOADED BY EVERY PAGE THAT DRAWS PANELS (dashboard, prestige,
   leaderboard). These lived in css/dashboard.css, which only the dashboard
   loads, so another page that reused the panel recipe got `var(--edge)`
   resolving to nothing and drew its panels with no border at all. Prestige
   had to restate them; the leaderboard would have been a third copy. Same
   values, relocated, so the three pages are one product by construction.

   Only the material lives here. Page-specific tokens stay with their page.
   ============================================================ */
:root {
  --surface-floor:  #06070a;   /* the page. the darkest thing on screen */
  --surface-panel:  #0e1016;   /* raised off the floor */
  --surface-raised: #14171f;   /* raised off a panel: tiles and chips */

  --edge-top: rgba(255, 255, 255, 0.1);     /* the lit top edge */
  --edge:     rgba(255, 255, 255, 0.055);   /* the general hairline */
}