/* Demo Page Styles */
:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Blueprint Background Styles - Demo Only */
.ddch-blueprint {
  --ddch-blueprint-bg: #2d5f8e;
  --ddch-blueprint-grid-line: rgba(180, 230, 255, 0.15);
  --ddch-blueprint-grid-main: rgba(180, 230, 255, 0.3);
  --ddch-blueprint-diagonal: rgba(180, 230, 255, 0.03);
  --ddch-blueprint-shadow: rgba(0, 0, 0, 0.2);
  --ddch-blueprint-vignette: rgba(0, 0, 0, 0.07);

  background-color: var(--ddch-blueprint-bg);
  background-image: linear-gradient(
      var(--ddch-blueprint-grid-line) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--ddch-blueprint-grid-line) 1px,
      transparent 1px
    ),
    linear-gradient(var(--ddch-blueprint-grid-main) 2px, transparent 2px),
    linear-gradient(
      90deg,
      var(--ddch-blueprint-grid-main) 2px,
      transparent 2px
    );
  background-size: 10px 10px, 10px 10px, 100px 100px, 100px 100px;
  background-position: 50% 10%, 50% 10%, 50% 10%, 50% 10%;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 100px var(--ddch-blueprint-shadow);
  z-index: 1;
}

.ddch-blueprint::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    45deg,
    var(--ddch-blueprint-diagonal),
    var(--ddch-blueprint-diagonal) 2px,
    transparent 2px,
    transparent 8px
  );
  pointer-events: none;
  z-index: -2;
}

.ddch-blueprint::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    transparent 0%,
    var(--ddch-blueprint-vignette) 100%
  );
  pointer-events: none;
  z-index: -1;
}

@media (prefers-color-scheme: dark) {
  .ddch-blueprint {
    --ddch-blueprint-bg: #1a1f2e;
    --ddch-blueprint-grid-line: rgba(100, 150, 200, 0.12);
    --ddch-blueprint-grid-main: rgba(100, 150, 200, 0.25);
    --ddch-blueprint-diagonal: rgba(100, 150, 200, 0.02);
    --ddch-blueprint-shadow: rgba(0, 0, 0, 0.5);
    --ddch-blueprint-vignette: rgba(0, 0, 0, 0.3);
  }
}

.ddch-blueprint.dark-theme {
  --ddch-blueprint-bg: #1a1f2e;
  --ddch-blueprint-grid-line: rgba(100, 150, 200, 0.12);
  --ddch-blueprint-grid-main: rgba(100, 150, 200, 0.25);
  --ddch-blueprint-diagonal: rgba(100, 150, 200, 0.02);
  --ddch-blueprint-shadow: rgba(0, 0, 0, 0.5);
  --ddch-blueprint-vignette: rgba(0, 0, 0, 0.3);
}

.ddch-blueprint.light-theme {
  --ddch-blueprint-bg: #2d5f8e;
  --ddch-blueprint-grid-line: rgba(180, 230, 255, 0.15);
  --ddch-blueprint-grid-main: rgba(180, 230, 255, 0.3);
  --ddch-blueprint-diagonal: rgba(180, 230, 255, 0.03);
  --ddch-blueprint-shadow: rgba(0, 0, 0, 0.2);
  --ddch-blueprint-vignette: rgba(0, 0, 0, 0.07);
}