:root {
  --bg: #f5f9fd;
  --fg: #1B1B1B;

  /* Grid tuning (kept here so variables are available globally) */
  --grid-size: 40px;
  --grid-dot-size: 3px;
  --grid-dot: rgba(0,0,0,0.10);
  --grid-phase-x: 0px;
  --grid-phase-y: 0px;
  --grid-offset-x: 0px;
  --grid-offset-y: 0px;

  --border: rgba(0,0,0,0.08);
  --card-bg: ;



  --accent-sage:    #97B1A6;
  --accent-blue:    #9CB7D6;
  --accent-apricot: #F2C6A0;
  --accent-mauve:   #C6A7C7;
  --accent-mist:    #C9CEC4;
}

:root[data-theme="dark"] {
  --bg: #222526;
  --fg: #EDEDED;
  --grid-dot: rgba(255,255,255,0.12);
  --border: rgba(255,255,255,0.12);
  --card-bg: rgba(15, 18, 23, 0.92);
}

/* Hero gradient vars (move here so one gradient can span the whole page) */
:root {
  --hero-maxw: 1120px;
  --hero-pad: clamp(24px, 5vw, 64px);
  --hero-radius: 22px;
  --hero-grad-1: #f0f6ff;
  --hero-grad-2: #e0ecff;
  --hero-grad-3: #d9ecff;
  --hero-key-face: rgba(255,255,255,0.65);
  --hero-key-stroke: rgba(0,0,0,0.06);
  --hero-key-glow: 140, 180, 255;
}

:root[data-theme="dark"] {
  --hero-grad-1: #0f1217;
  --hero-grad-2: #151a22;
  --hero-grad-3: #0d1219;
  --hero-key-face: rgba(0,0,0,0.5);
  --hero-key-stroke: rgba(255,255,255,0.08);
  --hero-key-glow: 120, 170, 255;
}

/* Apply a single large gradient to the document body so the hero and playground
   share the exact same background. The dot-grid will be rendered on top by
   #playground as a separate layer. */
body {
  /* Global hero gradient + subtle noise overlay (single source of truth).
     Noise is provided as a small repeating SVG tile blended with the gradients. */
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.2'/></svg>"),
    radial-gradient(1200px 600px at 50% 10%, var(--hero-grad-1), transparent 60%),
    radial-gradient(900px 600px at 80% 60%, var(--hero-grad-2), transparent 70%),
    linear-gradient(180deg, var(--hero-grad-3), transparent 60%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 140px 140px, auto, auto, cover;
  background-position: 0 0, 50% 10%, 80% 60%, 0 0;
  background-blend-mode: multiply, screen, overlay, normal;
  overflow-x: hidden;
  transition: background-color 0.3s ease;
}

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--fg);
}

/* When a module window (modal) is open */
body.modal-open {
  overflow: hidden;        /* Stop background scroll */
}

/* Reduced Motion: global preference handling */
@media (prefers-reduced-motion: reduce) {
    .module-card,
    .dialog-content,
    .theme-toggle,
    #hero {
        transition: none;
    }
    
    .module-card:hover {
        transform: none;
    }
}

/* Theme Switch - From Uiverse.io by JustCode14 */
/* The switch - the box around the slider */
.switch {
  font-size: 15px;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  display: inline-block;
  width: 4em;
  height: 2.2em;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2a2a2a;
  transition: 0.4s;
  border-radius: 30px;
  overflow: hidden;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 20px;
  left: 0.5em;
  bottom: 0.5em;
  transition: 0.4s;
  transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);
  box-shadow: inset 8px -4px 0px 0px #fff;
}

.switch input:checked + .slider {
  background-color: #00a6ff;
}

.switch input:checked + .slider:before {
  transform: translateX(1.8em);
  box-shadow: inset 15px -4px 0px 15px #ffcf48;
}

.star {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  width: 5px;
  transition: all 0.4s;
  height: 5px;
}

.star_1 {
  left: 2.5em;
  top: 0.5em;
}

.star_2 {
  left: 2.2em;
  top: 1.2em;
}

.star_3 {
  left: 3em;
  top: 0.9em;
}

.switch input:checked ~ .slider .star {
  opacity: 0;
}

.cloud {
  width: 3.5em;
  position: absolute;
  bottom: -1.4em;
  left: -1.1em;
  opacity: 0;
  transition: all 0.4s;
}

.switch input:checked ~ .slider .cloud {
  opacity: 1;
}