<script lang="ts">
  // Card variants:
  //   tone      — visual register of the surface (default | subtle | danger)
  //   elevation — depth cue via shadow (flat | raised)
  // Both default to the historical card look so existing call sites render
  // identically without passing the new props. Brand keeps shadows quiet
  // and the danger tint deliberately calm, never red-alert loud.
  type Tone = "default" | "subtle" | "danger";
  type Elevation = "flat" | "raised";

  let {
    children,
    classes = "",
    tone = "default" as Tone,
    elevation = "flat" as Elevation,
  } = $props();

  const toneClasses: Record<Tone, string> = {
    default: "bg-bg-card border border-border-subtle",
    subtle: "bg-bg-elevated border border-border-subtle/60",
    danger: "bg-danger/5 border border-danger/30",
  };

  // flat preserves the historical low-contrast shadow (matches --shadow-sm).
  // raised layers on Tailwind's shadow-md, the closest stock match to the
  // existing token style used by other raised surfaces in the app.
  const elevationClasses: Record<Elevation, string> = {
    flat: "shadow-[0_1px_3px_rgba(0,0,0,0.2)]",
    raised: "shadow-[0_1px_3px_rgba(0,0,0,0.2)] shadow-md",
  };
</script>

<div class="{toneClasses[tone as Tone]} {elevationClasses[elevation as Elevation]} rounded-2xl {classes}">
  {@render children()}
</div>
