:root {
  --surface-base: #1e293b;
  --surface-fill: #95a5a6;
  --surface-text: #ffffff;
  --border-color: #7f8c8d;
  --overlay-stripe-color: rgba(255, 255, 255, 0.2);
}

[theme=primary] {
  --surface-base: #1e293b;
  --surface-fill: #3498db;
  --surface-text: #ffffff;
  --border-color: #2980b9;
  --overlay-stripe-color: rgba(255, 255, 255, 0.25);
}

[theme=secondary] {
  --surface-base: #1e293b;
  --surface-fill: #2ecc71;
  --surface-text: #ffffff;
  --border-color: #27ae60;
  --overlay-stripe-color: rgba(255, 255, 255, 0.25);
}

[theme=alert] {
  --surface-base: #1e293b;
  --surface-fill: #e74c3c;
  --surface-text: #ffffff;
  --border-color: #c0392b;
  --overlay-stripe-color: rgba(255, 255, 255, 0.25);
}

[theme=warning] {
  --surface-base: #1e293b;
  --surface-fill: #f1c40f;
  --surface-text: #333333;
  --border-color: #f39c12;
  --overlay-stripe-color: rgba(255, 255, 255, 0.4);
}

[theme=dark] {
  --surface-base: #2c3e50;
  --surface-fill: #34495e;
  --surface-text: #ffffff;
  --border-color: #1a252f;
  --overlay-stripe-color: rgba(0, 0, 0, 0.2);
}

[theme=rainbow] {
  --surface-base: #555;
  --surface-fill: linear-gradient(90deg, red, orange, yellow, lime, green);
  --surface-text: #000000;
  --border-color: #000000;
  --overlay-stripe-color: rgba(0, 0, 0, 0.1);
}

[theme=halloween] {
  --surface-base: #2c3e50;
  --surface-fill: #e67e22;
  --surface-text: #ffffff;
  --border-color: #8e44ad;
  --overlay-stripe-color: rgba(0, 0, 0, 0.3);
}

[theme=christmas] {
  --surface-base: #1e293b;
  --surface-fill: #e74c3c;
  --surface-text: #ffffff;
  --border-color: #2ecc71;
  --overlay-stripe-color: rgba(255, 255, 255, 0.25);
}

[theme=valentine] {
  --surface-base: #ffb8b8;
  --surface-fill: #ff4757;
  --surface-text: #ffffff;
  --border-color: #ff6b81;
  --overlay-stripe-color: rgba(255, 255, 255, 0.3);
}

:root {
  --surface-radius: 4px;
  --surface-shadow: none;
  --overlay-convex-opacity: 0;
  --transition-speed: 2s;
  --border-width: 1px;
}

[variant=flat] {
  --surface-radius: 0px;
  --surface-shadow: none;
  --overlay-convex-opacity: 0;
  --border-width: 1px;
}

[variant=rounded] {
  --surface-radius: 25px;
  --surface-shadow: none;
  --overlay-convex-opacity: 0;
  --border-width: 1px;
}

[variant="3d"] {
  --surface-radius: 25px;
  --surface-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
  --overlay-convex-opacity: 1;
  --border-width: 1px;
}

[variant=soft] {
  --surface-radius: 8px;
  --surface-shadow: 0 4px 6px rgba(0,0,0,0.1);
  --overlay-convex-opacity: 0;
  --border-width: 0px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/*# sourceMappingURL=style.css.map */