@property --light-card-background-start {
  syntax: '<color>';
  inherits: false;
  initial-value: #667eea;
}

@property --light-card-background-end {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffcc8f;
}

@property --dark-card-background-start {
  syntax: '<color>';
  inherits: false;
  initial-value: #2d1b69;
}

@property --dark-card-background-end {
  syntax: '<color>';
  inherits: false;
  initial-value: #11665e;
}

.demo-card {
  background: linear-gradient(-135deg in oklab, #667eea88 0%, transparent 100%);
  transition: background-color 0.3s ease;
  border: 1px solid #fff4,
}

/* Local theme styles for conditional rendering example */
.local-theme-light {
  background-color: #ffffdf;
  color: #000000;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease, border 0.3s ease;
  border-color: #0008;
}

.local-theme-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
}

.local-theme-light h3 {
  color: #000000;
  text-shadow: 0 2px 4px rgb(200 200 255 / 0.9);
  margin-top: 0;
}

.local-theme-light p {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgb(200 200 200 / 0.6);
}

.local-theme-dark {
  background-color: #2d1b69;
  color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(45, 27, 105, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.local-theme-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(45, 27, 105, 0.5);
}

.local-theme-dark h3 {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  margin-top: 0;
}

.local-theme-dark p {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}