@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Define CSS variables globally for use in portals */
  :root {
    --smx-background: 0 0% 100%;
    --smx-foreground: 222.2 84% 4.9%;
    --smx-card: 0 0% 100%;
    --smx-card-foreground: 222.2 84% 4.9%;
    --smx-popover: 0 0% 100%;
    --smx-popover-foreground: 222.2 84% 4.9%;
    --smx-primary: 221.2 83.2% 53.3%;
    --smx-primary-foreground: 210 40% 98%;
    --smx-secondary: 210 40% 96.1%;
    --smx-secondary-foreground: 222.2 47.4% 11.2%;
    --smx-muted: 210 40% 96.1%;
    --smx-muted-foreground: 215.4 16.3% 46.9%;
    --smx-accent: 210 40% 96.1%;
    --smx-accent-foreground: 222.2 47.4% 11.2%;
    --smx-destructive: 0 84.2% 60.2%;
    --smx-destructive-foreground: 210 40% 98%;
    --smx-border: 214.3 31.8% 91.4%;
    --smx-input: 214.3 31.8% 91.4%;
    --smx-ring: 221.2 83.2% 53.3%;
    --smx-radius: 0.5rem;
  }

  #summix-getmd-export-root {
    /* Also apply to container for consistency */
    --smx-background: 0 0% 100%;
    --smx-foreground: 222.2 84% 4.9%;
    --smx-card: 0 0% 100%;
    --smx-card-foreground: 222.2 84% 4.9%;
    --smx-popover: 0 0% 100%;
    --smx-popover-foreground: 222.2 84% 4.9%;
    --smx-primary: 221.2 83.2% 53.3%;
    --smx-primary-foreground: 210 40% 98%;
    --smx-secondary: 210 40% 96.1%;
    --smx-secondary-foreground: 222.2 47.4% 11.2%;
    --smx-muted: 210 40% 96.1%;
    --smx-muted-foreground: 215.4 16.3% 46.9%;
    --smx-accent: 210 40% 96.1%;
    --smx-accent-foreground: 222.2 47.4% 11.2%;
    --smx-destructive: 0 84.2% 60.2%;
    --smx-destructive-foreground: 210 40% 98%;
    --smx-border: 214.3 31.8% 91.4%;
    --smx-input: 214.3 31.8% 91.4%;
    --smx-ring: 221.2 83.2% 53.3%;
    --smx-radius: 0.5rem;
  }

  :root.dark,
  #summix-getmd-export-root.dark {
    --smx-background: 222.2 84% 4.9%;
    --smx-foreground: 210 40% 98%;
    --smx-card: 222.2 84% 4.9%;
    --smx-card-foreground: 210 40% 98%;
    --smx-popover: 222.2 84% 4.9%;
    --smx-popover-foreground: 210 40% 98%;
    --smx-primary: 217.2 91.2% 59.8%;
    --smx-primary-foreground: 222.2 47.4% 11.2%;
    --smx-secondary: 217.2 32.6% 17.5%;
    --smx-secondary-foreground: 210 40% 98%;
    --smx-muted: 217.2 32.6% 17.5%;
    --smx-muted-foreground: 215 20.2% 65.1%;
    --smx-accent: 217.2 32.6% 17.5%;
    --smx-accent-foreground: 210 40% 98%;
    --smx-destructive: 0 62.8% 30.6%;
    --smx-destructive-foreground: 210 40% 98%;
    --smx-border: 217.2 32.6% 17.5%;
    --smx-input: 217.2 32.6% 17.5%;
    --smx-ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply smx-border-border;
  }
  #summix-getmd-export-root {
    @apply smx-bg-background smx-text-foreground;
  }
}

/* Portal styling fix for Radix UI dropdowns/popovers */
/* These elements render outside #summix-getmd-export-root, so we need global rules */
/* Higher than WordPress admin bar (99999) and dialogs (100000) */
.smx-z-wordpress-dropdown {
  z-index: 100050 !important;
  background-color: hsl(var(--smx-popover)) !important;
  color: hsl(var(--smx-popover-foreground)) !important;
  border: 1px solid hsl(var(--smx-border)) !important;
}