@layer base {
  [data-mm-theme] body {
    @apply bg-background text-foreground;
  }

  [data-mm-theme] * {
    /* Apply border color and outline ring using mapped variables */
    @apply border-border outline-ring/50;
  }

  [data-mm-theme] button,
  [data-mm-theme] [role='button'] {
    cursor: pointer;
  }

  [data-mm-theme] :disabled {
    cursor: default;
  }

  .mm-styled {
    @apply text-foreground border-border outline-ring/50;
  }

  .mm-styled * {
    @apply border-border outline-ring/50;
  }
}