theme-o-rama/dist/themes.css

A TypeScript library for dynamic theme management in react + shadcn + tailwind applications

:root {
  /* Default light theme - these will be overridden by the theme system */
  --theme-color: hsl(0, 0%, 100%);
  --background: transparent;
  --foreground: hsl(0 0% 3.9%);
  --card: transparent;
  --card-foreground: hsl(0 0% 3.9%);
  --popover: transparent;
  --popover-foreground: hsl(0 0% 3.9%);
  --primary: hsl(0 0% 9%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(0 0% 96.1%);
  --secondary-foreground: hsl(0 0% 9%);
  --muted: hsl(0 0% 96.1%);
  --muted-foreground: hsl(0 0% 45.1%);
  --accent: hsl(0 0% 96.1%);
  --accent-foreground: hsl(0 0% 9%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(0 0% 89.8%);
  --input: hsl(0 0% 89.8%);
  --input-background: hsl(0 0% 100%);
  --ring: hsl(0 0% 3.9%);
  --radius: 0.5rem;

  /* Default font families */
  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
    Courier New, monospace;
  --font-heading: Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;

  /* Default corner radius values */
  --corner-none: 0px;
  --corner-sm: 0.125rem;
  --corner-md: 0.375rem;
  --corner-lg: 0.5rem;
  --corner-xl: 0.75rem;
  --corner-full: 9999px;

  /* Default shadow values */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-button: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-dropdown:
    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Default backdrop-filter values */
  --card-backdrop-filter: none;
  --popover-backdrop-filter: none;
  --input-backdrop-filter: none;
  --table-header-backdrop-filter: none;
  --table-row-backdrop-filter: none;
  --table-footer-backdrop-filter: none;

  /* Button-specific CSS variables with defaults */
  --btn-default-background: var(--primary);
  --btn-default-color: var(--primary-foreground);
  --btn-default-border: none;
  --btn-default-border-style: solid;
  --btn-default-border-width: 0;
  --btn-default-border-color: transparent;
  --btn-default-radius: var(--radius);
  --btn-default-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --btn-default-backdrop-filter: none;
  --btn-default-hover-background: var(--primary);
  --btn-default-hover-color: var(--primary-foreground);
  --btn-default-hover-transform: none;
  --btn-default-hover-border-style: solid;
  --btn-default-hover-border-color: transparent;
  --btn-default-hover-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --btn-default-active-background: var(--primary);
  --btn-default-active-color: var(--primary-foreground);
  --btn-default-active-transform: none;
  --btn-default-active-border-style: solid;
  --btn-default-active-border-color: transparent;
  --btn-default-active-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  --btn-outline-background: transparent;
  --btn-outline-color: var(--foreground);
  --btn-outline-border: 1px solid var(--border);
  --btn-outline-border-style: solid;
  --btn-outline-border-width: 1px;
  --btn-outline-border-color: var(--border);
  --btn-outline-radius: var(--radius);
  --btn-outline-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --btn-outline-backdrop-filter: none;
  --btn-outline-hover-background: var(--accent);
  --btn-outline-hover-color: var(--accent-foreground);
  --btn-outline-hover-transform: none;
  --btn-outline-hover-border-style: solid;
  --btn-outline-hover-border-color: var(--border);
  --btn-outline-hover-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --btn-outline-active-background: var(--accent);
  --btn-outline-active-color: var(--accent-foreground);
  --btn-outline-active-transform: none;
  --btn-outline-active-border-style: solid;
  --btn-outline-active-border-color: var(--border);
  --btn-outline-active-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  --btn-secondary-background: var(--secondary);
  --btn-secondary-color: var(--secondary-foreground);
  --btn-secondary-border: none;
  --btn-secondary-border-style: solid;
  --btn-secondary-border-width: 0;
  --btn-secondary-border-color: transparent;
  --btn-secondary-radius: var(--radius);
  --btn-secondary-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --btn-secondary-backdrop-filter: none;
  --btn-secondary-hover-background: var(--secondary);
  --btn-secondary-hover-color: var(--secondary-foreground);
  --btn-secondary-hover-transform: none;
  --btn-secondary-hover-border-style: solid;
  --btn-secondary-hover-border-color: transparent;
  --btn-secondary-hover-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --btn-secondary-active-background: var(--secondary);
  --btn-secondary-active-color: var(--secondary-foreground);
  --btn-secondary-active-transform: none;
  --btn-secondary-active-border-style: solid;
  --btn-secondary-active-border-color: transparent;
  --btn-secondary-active-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  --btn-destructive-background: var(--destructive);
  --btn-destructive-color: var(--destructive-foreground);
  --btn-destructive-border: none;
  --btn-destructive-border-style: solid;
  --btn-destructive-border-width: 0;
  --btn-destructive-border-color: transparent;
  --btn-destructive-radius: var(--radius);
  --btn-destructive-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --btn-destructive-hover-background: var(--destructive);
  --btn-destructive-hover-color: var(--destructive-foreground);
  --btn-destructive-hover-transform: none;
  --btn-destructive-hover-border-style: solid;
  --btn-destructive-hover-border-color: transparent;
  --btn-destructive-hover-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --btn-destructive-active-background: var(--destructive);
  --btn-destructive-active-color: var(--destructive-foreground);
  --btn-destructive-active-transform: none;
  --btn-destructive-active-border-style: solid;
  --btn-destructive-active-border-color: transparent;
  --btn-destructive-active-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  --btn-ghost-background: transparent;
  --btn-ghost-color: var(--foreground);
  --btn-ghost-border: none;
  --btn-ghost-border-style: solid;
  --btn-ghost-border-width: 0;
  --btn-ghost-border-color: transparent;
  --btn-ghost-radius: var(--radius);
  --btn-ghost-shadow: none;
  --btn-ghost-hover-background: var(--accent);
  --btn-ghost-hover-color: var(--accent-foreground);
  --btn-ghost-hover-transform: none;
  --btn-ghost-hover-border-style: solid;
  --btn-ghost-hover-border-color: transparent;
  --btn-ghost-hover-shadow: none;
  --btn-ghost-active-background: var(--accent);
  --btn-ghost-active-color: var(--accent-foreground);
  --btn-ghost-active-transform: none;
  --btn-ghost-active-border-style: solid;
  --btn-ghost-active-border-color: transparent;
  --btn-ghost-active-shadow: none;

  --btn-link-background: transparent;
  --btn-link-color: var(--primary);
  --btn-link-border: none;
  --btn-link-border-style: solid;
  --btn-link-border-width: 0;
  --btn-link-border-color: transparent;
  --btn-link-radius: var(--radius);
  --btn-link-shadow: none;
  --btn-link-hover-background: transparent;
  --btn-link-hover-color: var(--primary);
  --btn-link-hover-transform: none;
  --btn-link-hover-border-style: solid;
  --btn-link-hover-border-color: transparent;
  --btn-link-hover-shadow: none;
  --btn-link-active-background: transparent;
  --btn-link-active-color: var(--primary);
  --btn-link-active-transform: none;
  --btn-link-active-border-style: solid;
  --btn-link-active-border-color: transparent;
  --btn-link-active-shadow: none;
  --btn-destructive-backdrop-filter: none;
  --btn-ghost-backdrop-filter: none;
  --btn-link-backdrop-filter: none;

  /* Theme-specific button style flags */
  --theme-has-gradient-buttons: 0;
  --theme-has-shimmer-effects: 0;
  --theme-has-pixel-art: 0;
  --theme-has-3d-effects: 0;
  --theme-has-rounded-buttons: 0;

  /* Navigation active background */
  --nav-active-background: color-mix(
    in srgb,
    var(--primary, hsl(0 0% 9%)) 10%,
    transparent
  );
  --outline-button-background: transparent;

  /* Sidebar styling variables with defaults */
  --sidebar-background: transparent;
  --sidebar-backdrop-filter: none;
  --sidebar-border: var(--border);

  /* Table styling variables with defaults */
  --table-background: transparent;
  --table-border: 1px solid var(--border);
  --table-box-shadow: var(--shadow-sm);
  --table-header-background: transparent;
  --table-header-color: var(--muted-foreground);
  --table-header-font-weight: 500;
  --table-header-font-size: 0.875rem;
  --table-header-padding: 0.15rem 0.5rem;
  --table-row-background: transparent;
  --table-row-color: var(--foreground);
  --table-row-border: 1px solid var(--border);
  --table-row-hover-background: var(--muted);
  --table-row-hover-color: var(--foreground);
  --table-row-selected-background: var(--accent);
  --table-row-selected-color: var(--accent-foreground);
  --table-cell-padding: 0.5rem;
  --table-cell-border: none;
  --table-cell-font-size: 0.875rem;
  --table-footer-background: var(--muted);
  --table-footer-color: var(--muted-foreground);
  --table-footer-border: 1px solid var(--border);

  /* Switch styling variables with defaults */
  --switch-checked-background: var(--primary);
  --switch-unchecked-background: var(--input);
  --switch-thumb-background: hsl(0 0% 100%);
}

/* Smooth theme transitions */
:root {
  /* Transition duration - can be overridden by themes */
  --theme-transition-duration: 300ms;
  --theme-transition-timing: ease-in-out;
}

/* Respect user's motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition-duration: 0ms;
  }
}

/* Apply transitions to elements that use theme colors */
* {
  border-color: var(--border);
  transition:
    background-color var(--theme-transition-duration)
      var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    opacity var(--theme-transition-duration) var(--theme-transition-timing);
}

/* Disable transitions for certain elements that should be instant */
*:where(
  input,
  textarea,
  select,
  button:active,
  [data-no-transition],
  .no-transition
) {
  transition-duration: 0ms !important;
}

/* Special handling for background images - fade in/out */

body {
  background-color: var(--background);
  color: var(--foreground);
  transition:
    background-color var(--theme-transition-duration)
      var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing);
}

html.has-background-image {
  background-image: var(--background-image);
  background-size: var(--background-size, cover);
  background-position: var(--background-position, center);
  background-repeat: var(--background-repeat, no-repeat);
  transition: background-image var(--theme-transition-duration)
    var(--theme-transition-timing);
}

/* Theme cards with background images */
.has-background-image.bg-card {
  background-color: var(--card);
}

/* Ensure cards and popovers transition smoothly */
.bg-card,
.bg-popover {
  transition:
    background-color var(--theme-transition-duration)
      var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing);
}

/* Dynamic outline button styling for all themes */
.outline-btn {
  background-color: var(--outline-button-background);
}

/* Dynamic theme-specific button variant overrides */
/* Gradient buttons - applied when theme has gradient flag */
.btn-variant-default[data-theme-style*="gradient"] {
  background: linear-gradient(
    135deg,
    var(--btn-default-background),
    var(--btn-default-hover-background)
  );
  color: var(--btn-default-color);
  border: var(--btn-default-border);
}

.btn-variant-outline[data-theme-style*="gradient"] {
  background: linear-gradient(
    135deg,
    var(--btn-outline-background),
    var(--btn-outline-hover-background)
  );
  color: var(--btn-outline-color);
  border: var(--btn-outline-border);
}

.btn-variant-secondary[data-theme-style*="gradient"] {
  background: linear-gradient(
    135deg,
    var(--btn-secondary-background),
    var(--btn-secondary-hover-background)
  );
  color: var(--btn-secondary-color);
  border: var(--btn-secondary-border);
}

/* Shimmer effects - applied when theme has shimmer flag */
.btn-variant-default[data-theme-style*="shimmer"] {
  background: var(--btn-default-background);
  border: var(--btn-default-border);
  color: var(--btn-default-color);
  position: relative;
  overflow: hidden;
  opacity: 0.8;
}

.btn-variant-outline[data-theme-style*="shimmer"] {
  background: var(--btn-outline-background);
  border: var(--btn-outline-border);
  color: var(--btn-outline-color);
  position: relative;
  overflow: hidden;
  opacity: 0.8;
}

.btn-variant-secondary[data-theme-style*="shimmer"] {
  background: var(--btn-secondary-background);
  border: var(--btn-secondary-border);
  color: var(--btn-secondary-color);
  position: relative;
  overflow: hidden;
  opacity: 0.8;
}

.btn-variant-default[data-theme-style*="shimmer"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--btn-default-hover-color),
    transparent
  );
  opacity: 0.2;
  transition: left 0.3s ease;
}

.btn-variant-default[data-theme-style*="shimmer"]:hover::before {
  left: 100%;
}

.btn-variant-outline[data-theme-style*="shimmer"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--btn-outline-hover-color),
    transparent
  );
  opacity: 0.2;
  transition: left 0.3s ease;
}

.btn-variant-outline[data-theme-style*="shimmer"]:hover {
  border-color: var(--btn-outline-hover-border-color);
  color: var(--btn-outline-hover-color);
  opacity: 1;
}

.btn-variant-outline[data-theme-style*="shimmer"]:hover::before {
  left: 100%;
}

.btn-variant-secondary[data-theme-style*="shimmer"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--btn-secondary-hover-color),
    transparent
  );
  opacity: 0.2;
  transition: left 0.3s ease;
}

.btn-variant-secondary[data-theme-style*="shimmer"]:hover::before {
  left: 100%;
}

/* Pixel art style - applied when theme has pixel-art flag */
.btn-variant-default[data-theme-style*="pixel-art"] {
  background: var(--btn-default-background);
  color: var(--btn-default-color);
  border: var(--btn-default-border);
  box-shadow: var(--btn-default-shadow);
}

.btn-variant-default[data-theme-style*="pixel-art"]:hover {
  transform: var(--btn-default-hover-transform);
  box-shadow: var(--btn-default-hover-shadow);
}

.btn-variant-outline[data-theme-style*="pixel-art"] {
  background: var(--btn-outline-background);
  border: var(--btn-outline-border);
  color: var(--btn-outline-color);
  box-shadow: var(--btn-outline-shadow);
}

.btn-variant-secondary[data-theme-style*="pixel-art"] {
  background: var(--btn-secondary-background);
  border: var(--btn-secondary-border);
  color: var(--btn-secondary-color);
  box-shadow: var(--btn-secondary-shadow);
}

/* 3D effects - applied when theme has 3d-effects flag */
.btn-variant-default[data-theme-style*="3d-effects"] {
  background: var(--btn-default-background);
  color: var(--btn-default-color);
  border: var(--btn-default-border);
  box-shadow: var(--btn-default-shadow);
}

.btn-variant-default[data-theme-style*="3d-effects"]:active {
  border-style: var(--btn-default-active-border-style);
  box-shadow: var(--btn-default-active-shadow);
}

.btn-variant-outline[data-theme-style*="3d-effects"] {
  background: var(--btn-outline-background);
  border: var(--btn-outline-border);
  color: var(--btn-outline-color);
}

.btn-variant-secondary[data-theme-style*="3d-effects"] {
  background: var(--btn-secondary-background);
  border: var(--btn-secondary-border);
  color: var(--btn-secondary-color);
}

.btn-variant-primary[data-theme-style*="3d-effects"] {
  background: var(--btn-primary-background);
  color: var(--btn-primary-color);
  border: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
}

.btn-variant-primary[data-theme-style*="3d-effects"]:active {
  border-style: var(--btn-primary-active-border-style);
  box-shadow: var(--btn-primary-active-shadow);
}

/* Rounded buttons - applied when theme has rounded-buttons flag */
.btn-variant-default[data-theme-style*="rounded-buttons"] {
  background: var(--btn-default-background);
  color: var(--btn-default-color);
  border-radius: var(--btn-default-radius);
  border: var(--btn-default-border);
  box-shadow: var(--btn-default-shadow);
}

.btn-variant-outline[data-theme-style*="rounded-buttons"] {
  background: var(--btn-outline-background);
  color: var(--btn-outline-color);
  border: var(--btn-outline-border);
  border-radius: var(--btn-outline-radius);
}

.btn-variant-secondary[data-theme-style*="rounded-buttons"] {
  background: var(--btn-secondary-background);
  color: var(--btn-secondary-color);
  border: var(--btn-secondary-border);
  border-radius: var(--btn-secondary-radius);
}

/* Destructive button variant theme support */
.btn-variant-destructive[data-theme-style*="gradient"] {
  background: linear-gradient(
    135deg,
    var(--btn-destructive-background),
    var(--btn-destructive-hover-background)
  );
  color: var(--btn-destructive-color);
  border: var(--btn-destructive-border);
}

.btn-variant-destructive[data-theme-style*="shimmer"] {
  background: var(--btn-destructive-background);
  border: var(--btn-destructive-border);
  color: var(--btn-destructive-color);
  position: relative;
  overflow: hidden;
  opacity: 0.9;
}

.btn-variant-destructive[data-theme-style*="shimmer"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--btn-destructive-hover-color),
    transparent
  );
  opacity: 0.2;
  transition: left 0.3s ease;
}

.btn-variant-destructive[data-theme-style*="shimmer"]:hover::before {
  left: 100%;
}

.btn-variant-destructive[data-theme-style*="shimmer"]:hover {
  opacity: 1;
}

.btn-variant-destructive[data-theme-style*="pixel-art"] {
  background: var(--btn-destructive-background);
  color: var(--btn-destructive-color);
  border: var(--btn-destructive-border);
  box-shadow: var(--btn-destructive-shadow);
}

.btn-variant-destructive[data-theme-style*="pixel-art"]:hover {
  transform: var(--btn-destructive-hover-transform);
  box-shadow: var(--btn-destructive-hover-shadow);
}

.btn-variant-destructive[data-theme-style*="3d-effects"] {
  background: var(--btn-destructive-background);
  color: var(--btn-destructive-color);
  border: var(--btn-destructive-border);
  box-shadow: var(--btn-destructive-shadow);
}

.btn-variant-destructive[data-theme-style*="3d-effects"]:active {
  border-style: var(--btn-destructive-active-border-style);
  box-shadow: var(--btn-destructive-active-shadow);
}

.btn-variant-destructive[data-theme-style*="rounded-buttons"] {
  background: var(--btn-destructive-background);
  color: var(--btn-destructive-color);
  border-radius: var(--btn-destructive-radius);
  border: var(--btn-destructive-border);
  box-shadow: var(--btn-destructive-shadow);
}

/* Ghost button variant theme support */
.btn-variant-ghost[data-theme-style*="gradient"] {
  background: linear-gradient(
    135deg,
    var(--btn-ghost-background),
    var(--btn-ghost-hover-background)
  );
  color: var(--btn-ghost-color);
  border: var(--btn-ghost-border);
}

.btn-variant-ghost[data-theme-style*="shimmer"] {
  background: var(--btn-ghost-background);
  border: var(--btn-ghost-border);
  color: var(--btn-ghost-color);
  position: relative;
  overflow: hidden;
  opacity: 0.8;
}

.btn-variant-ghost[data-theme-style*="shimmer"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--btn-ghost-hover-color),
    transparent
  );
  opacity: 0.2;
  transition: left 0.3s ease;
}

.btn-variant-ghost[data-theme-style*="shimmer"]:hover::before {
  left: 100%;
}

.btn-variant-ghost[data-theme-style*="pixel-art"] {
  background: var(--btn-ghost-background);
  color: var(--btn-ghost-color);
  border: var(--btn-ghost-border);
  box-shadow: var(--btn-ghost-shadow);
}

.btn-variant-ghost[data-theme-style*="pixel-art"]:hover {
  transform: var(--btn-ghost-hover-transform);
  box-shadow: var(--btn-ghost-hover-shadow);
}

.btn-variant-ghost[data-theme-style*="3d-effects"] {
  background: var(--btn-ghost-background);
  color: var(--btn-ghost-color);
  border: var(--btn-ghost-border);
}

.btn-variant-ghost[data-theme-style*="rounded-buttons"] {
  background: var(--btn-ghost-background);
  color: var(--btn-ghost-color);
  border: var(--btn-ghost-border);
  border-radius: var(--btn-ghost-radius);
}

/* Link button variant theme support */
.btn-variant-link[data-theme-style*="gradient"] {
  background: linear-gradient(
    135deg,
    var(--btn-link-background),
    var(--btn-link-hover-background)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-variant-link[data-theme-style*="shimmer"] {
  color: var(--btn-link-color);
  position: relative;
  overflow: hidden;
}

.btn-variant-link[data-theme-style*="shimmer"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--btn-link-hover-color),
    transparent
  );
  opacity: 0.3;
  transition: left 0.3s ease;
}

.btn-variant-link[data-theme-style*="shimmer"]:hover::before {
  left: 100%;
}

.btn-variant-link[data-theme-style*="pixel-art"] {
  color: var(--btn-link-color);
  text-shadow: 1px 1px 0 var(--foreground);
}

.btn-variant-link[data-theme-style*="3d-effects"] {
  color: var(--btn-link-color);
  text-shadow:
    1px 1px 0 var(--background),
    -1px -1px 0 var(--muted-foreground);
}

.btn-variant-link[data-theme-style*="rounded-buttons"] {
  color: var(--btn-link-color);
  padding: 4px 8px;
  border-radius: var(--btn-link-radius);
  background: var(--btn-link-background);
}

/* Custom switch styling */
.switch-component.peer[data-state="checked"] {
  background-color: var(--switch-checked-background);
}

.switch-component.peer[data-state="unchecked"] {
  background-color: var(--switch-unchecked-background);
}

/* Alternative selectors for when data-state is on child elements */
.switch-component.peer:has([data-state="checked"]) {
  background-color: var(--switch-checked-background);
}

.switch-component.peer:has([data-state="unchecked"]) {
  background-color: var(--switch-unchecked-background);
}

/* Ensure switches are always visible, even with background images */
body.has-background-image .switch-component.peer[data-state="checked"] {
  background-color: var(--switch-checked-background);
  opacity: 1;
}

body.has-background-image .switch-component.peer[data-state="unchecked"] {
  background-color: var(--switch-unchecked-background);
  opacity: 1;
}

body.has-background-image .switch-component.peer:has([data-state="checked"]) {
  background-color: var(--switch-checked-background);
  opacity: 1;
}

body.has-background-image .switch-component.peer:has([data-state="unchecked"]) {
  background-color: var(--switch-unchecked-background);
  opacity: 1;
}

/* Ensure switch thumb is always visible */
.switch-component.peer span {
  background-color: var(--switch-thumb-background, hsl(0 0% 100%));
}

/* Override for background image themes */
body.has-background-image .switch-component.peer span {
  background-color: var(--switch-thumb-background, hsl(0 0% 100%));
}

/* Theme card isolation - prevent inheritance from ambient theme */
.theme-card-isolated {
  /* Create a new stacking context to isolate CSS variables */
  isolation: isolate;
  /* Ensure the theme variables don't inherit from parent */
  contain: style;
}

/* Theme-aware table styling */
.table-theme {
  background: var(--table-background);
  border: var(--table-border);
  box-shadow: var(--table-box-shadow);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.table-theme thead tr {
  background: var(--table-header-background);
  -webkit-backdrop-filter: var(--table-header-backdrop-filter-webkit);
  backdrop-filter: var(--table-header-backdrop-filter);
}

.table-theme thead th {
  color: var(--table-header-color);
  border: var(--table-header-border);
  font-weight: var(--table-header-font-weight);
  font-size: var(--table-header-font-size);
  padding: var(--table-header-padding);
  background: transparent;
}

.table-theme tbody tr {
  background: var(--table-row-background);
  color: var(--table-row-color);
  border: var(--table-row-border);
  -webkit-backdrop-filter: var(--table-row-backdrop-filter-webkit);
  backdrop-filter: var(--table-row-backdrop-filter);
}

.table-theme tbody tr:hover {
  background: var(--table-row-hover-background);
  color: var(--table-row-hover-color);
}

.table-theme tbody tr[data-state="selected"] {
  background: var(--table-row-selected-background);
  color: var(--table-row-selected-color);
}

.table-theme tbody td {
  padding: var(--table-cell-padding);
  border: var(--table-cell-border);
  font-size: var(--table-cell-font-size);
}

.table-theme tfoot th {
  background: var(--table-footer-background);
  color: var(--table-footer-color);
  border: var(--table-footer-border);
  -webkit-backdrop-filter: var(--table-footer-backdrop-filter-webkit);
  backdrop-filter: var(--table-footer-backdrop-filter);
}

/* Backdrop filter utility classes */
.backdrop-blur-card {
  -webkit-backdrop-filter: var(--card-backdrop-filter);
  backdrop-filter: var(--card-backdrop-filter);
}

.backdrop-blur-popover {
  -webkit-backdrop-filter: var(--popover-backdrop-filter);
  backdrop-filter: var(--popover-backdrop-filter);
}

.backdrop-blur-input {
  -webkit-backdrop-filter: var(--input-backdrop-filter);
  backdrop-filter: var(--input-backdrop-filter);
}

/* Apply backdrop filters to existing components */
.bg-card {
  background-color: var(--card);
  -webkit-backdrop-filter: var(--card-backdrop-filter);
  backdrop-filter: var(--card-backdrop-filter);
}

.bg-popover {
  background-color: var(--popover);
  -webkit-backdrop-filter: var(--popover-backdrop-filter);
  backdrop-filter: var(--popover-backdrop-filter);
}

.bg-input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
  -webkit-backdrop-filter: var(--input-backdrop-filter);
  backdrop-filter: var(--input-backdrop-filter);
}

/* Table header backdrop filter is now applied via thead::before */

.table-theme tfoot th,
.table-theme tfoot td {
  -webkit-backdrop-filter: var(--table-footer-backdrop-filter-webkit);
  backdrop-filter: var(--table-footer-backdrop-filter);
}