/* Custom styles for Authdog Documentation */

:root {
  --grid-color: rgba(0, 0, 0, 0.02);
  --grid-emphasis-color: rgba(0, 0, 0, 0.045);
  --accent-primary: rgba(147, 51, 234, 0.03);
  /* violet */
  --accent-secondary: rgba(20, 184, 166, 0.02);
  /* teal */
  --accent-tertiary: rgba(59, 130, 246, 0.02);
  /* blue */
  --grid-size: 40px;
}

.dark {
  --grid-color: rgba(255, 255, 255, 0.03);
  --grid-emphasis-color: rgba(255, 255, 255, 0.085);
  --accent-primary: rgba(147, 51, 234, 0.08);
  --accent-secondary: rgba(20, 184, 166, 0.06);
  --accent-tertiary: rgba(59, 130, 246, 0.06);
}

body {
  position: relative;
  background-attachment: fixed;
}

/* Background layers */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;

  background-image: radial-gradient(
      circle at 20% 0%,
      var(--accent-primary) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 0%,
      var(--accent-secondary) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 50%,
      var(--accent-tertiary) 10%,
      transparent 70%
    ), linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, var(--grid-size)
    var(--grid-size), var(--grid-size) var(--grid-size);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;

  /* Mask to fade out the grid at the edges */
  mask-image: radial-gradient(circle at center, black, transparent 95%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 95%);
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;

  /* Emphasize the grid with a subtle "light" sweep */
  background-image: linear-gradient(
      to right,
      var(--grid-emphasis-color) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, var(--grid-emphasis-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-repeat: repeat;
  mask-image: radial-gradient(circle at 50% 12%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(
    circle at 50% 12%,
    black 0%,
    transparent 80%
  );
}

/* Ensure the main content area feels premium */
.zudoku-content {
  backdrop-filter: blur(8px);
}