// B5 (docs/DESIGN.md): one glass class and one radius per surface ROLE, so corners nest and no site
// drifts its own alpha. A call site names the role and adds only its layout (padding, width, flex);
// the radius comes from here, never beside it (no tailwind-merge: two `rounded-*` is a coin flip). A
// raw `glass` / `glass-card` / `glass-menu` class anywhere else is a lint error (`local/surface-role`).
//
// What floats over undimmed content (a menu, a popover, a tooltip, a toast) is `.glass-menu`, the
// near-opaque tier, so it stays readable over any thumbnail; what sits in the page is `.glass-card`;
// a dialog, a drawer, a docked or side panel and a page section is `.glass`.
export const SURFACE = {
  /** A dialog, a side panel, a dock, a page section: r16. */
  panel: "glass rounded-2xl",
  /** A dialog that slides in from the edge: square on a phone, r16 on its open side. */
  drawer: "glass rounded-none sm:rounded-l-2xl",
  /** A card or a row card in the page (a video, a user, a download): r12. */
  card: "glass-card rounded-xl",
  /** A menu or a listbox: r12, 4px padding, so its r8 rows nest (12 − 4). */
  menu: "glass-menu rounded-xl p-1",
  /** Floating content that is not a list of choices (a hover card, a status popover, a toast): r12. */
  popover: "glass-menu rounded-xl",
  /** A tooltip: r8. */
  tooltip: "glass-menu rounded-lg",
  /** A control bar floating over the page (the debug recorder's bar): a pill (A2: round floats). */
  floating: "glass-menu rounded-full",
  /** The pull tab on a side panel's edge: square on the wall side, r12 on the open side. */
  edgeTab: "glass rounded-r-xl",
  /** A full-width sticky band (the design lab's header): square. */
  band: "glass",
} as const;

export type SurfaceRole = keyof typeof SURFACE;