/* Surface — card-like wrapper.
 * Replaces ad-hoc card classes with a token-driven primitive.
 * Variants are switched via class names; see SurfaceComponent.
 */

.surface {
  display: block;
  position: relative;
  overflow: hidden;
}

/* Tones ----------------------------------------------------------------- */
.surface--plain {
  background: var(--surface-raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-subtle);
}

.surface--frosted {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  /* Fallback: solid white for browsers without backdrop-filter */
  .surface--frosted { background: rgba(255, 255, 255, 0.95); }
}

/* Padding --------------------------------------------------------------- */
.surface--padding-none { padding: 0;      }
.surface--padding-sm   { padding: 0.5rem; }
.surface--padding-md   { padding: 1rem;   }
.surface--padding-lg   { padding: 1.5rem; }

/* Radius ---------------------------------------------------------------- */
.surface--radius-sm   { border-radius: 4px;     }
.surface--radius-md   { border-radius: 8px;     }
.surface--radius-lg   { border-radius: 16px;    }
.surface--radius-pill { border-radius: 9999px;  }