/* Base grid styles for light themes (including emerald) */
.notepad-grid {
  background: linear-gradient(
      to bottom,
      transparent 19px,
      var(--color-base-300) 20px
    ),
    linear-gradient(to right, transparent 19px, var(--color-base-300) 20px);
  background-size: 20px 20px;
  background-color: var(--color-base-100);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-base-300);
}

/* Dotted grid styles using theme variables */
.notepad-dots {
  background-image: radial-gradient(var(--color-base-300) 2px, transparent 2px);
  background-size: 20px 20px;
  background-color: var(--color-base-100);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-base-300);
}

/* Ruled paper lines */
.notepad-ruled {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--color-base-100) 0,
    var(--color-base-100) 23px,
    var(--color-base-300) 24px
  );
  background-size: 100% 24px;
  background-color: var(--color-base-100);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-base-300);
}

/* Cross-hatch (X) pattern */
.notepad-crosses {
  background-image: repeating-linear-gradient(
      45deg,
      var(--color-base-300) 0,
      var(--color-base-300) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      -45deg,
      var(--color-base-300) 0,
      var(--color-base-300) 1px,
      transparent 1px,
      transparent 20px
    );
  background-size: 20px 20px;
  background-color: var(--color-base-100);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-base-300);
}