/* =========================================================
   Blueprint patterns.
   Utility classes for decorative backgrounds. Apply to any
   block-level element. Each class has light-surface defaults;
   add .is-dark for a dark-surface variant with higher contrast.
   Colors resolve from --brand-blue / --brand-teal so they
   stay token-driven (no raw hex).
   ========================================================= */

/* 1. Blueprint grid: engineering paper with major + minor lines */
.pattern-blueprint-grid {
  background-image:
    linear-gradient(color-mix(in oklch, var(--brand-blue) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--brand-blue) 8%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in oklch, var(--brand-blue) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--brand-blue) 4%, transparent) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}
.pattern-blueprint-grid.is-dark {
  background-image:
    linear-gradient(color-mix(in oklch, var(--brand-blue) 15%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--brand-blue) 15%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in oklch, var(--brand-blue) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--brand-blue) 6%, transparent) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}

/* 2. Dot matrix: clean dot grid like technical paper */
.pattern-dot-matrix {
  background-image: radial-gradient(circle, color-mix(in oklch, var(--brand-blue) 15%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}
.pattern-dot-matrix.is-dark {
  background-image: radial-gradient(circle, color-mix(in oklch, var(--brand-blue) 25%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 3. Crosshairs: registration marks in a repeating grid */
.pattern-crosshairs {
  background-image:
    linear-gradient(color-mix(in oklch, var(--brand-blue) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--brand-blue) 10%, transparent) 1px, transparent 1px),
    radial-gradient(circle 2px, color-mix(in oklch, var(--brand-teal) 15%, transparent) 2px, transparent 2px);
  background-size: 48px 48px, 48px 48px, 48px 48px;
  background-position: -0.5px -0.5px, -0.5px -0.5px, 0 0;
}
.pattern-crosshairs.is-dark {
  background-image:
    linear-gradient(color-mix(in oklch, var(--brand-blue) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--brand-blue) 12%, transparent) 1px, transparent 1px),
    radial-gradient(circle 2px, color-mix(in oklch, var(--brand-teal) 25%, transparent) 2px, transparent 2px);
  background-size: 48px 48px, 48px 48px, 48px 48px;
  background-position: -0.5px -0.5px, -0.5px -0.5px, 0 0;
}

/* 4. Isometric: 60-degree angled grid for technical 3D drawing */
.pattern-isometric {
  background-image:
    linear-gradient(30deg, color-mix(in oklch, var(--brand-blue) 6%, transparent) 1px, transparent 1px),
    linear-gradient(150deg, color-mix(in oklch, var(--brand-blue) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--brand-blue) 4%, transparent) 1px, transparent 1px);
  background-size: 28px 48px, 28px 48px, 28px 48px;
}
.pattern-isometric.is-dark {
  background-image:
    linear-gradient(30deg, color-mix(in oklch, var(--brand-blue) 10%, transparent) 1px, transparent 1px),
    linear-gradient(150deg, color-mix(in oklch, var(--brand-blue) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--brand-blue) 6%, transparent) 1px, transparent 1px);
  background-size: 28px 48px, 28px 48px, 28px 48px;
}

/* 5. Dimension lines: horizontal construction lines with tick marks */
.pattern-dimension-lines {
  background-image:
    linear-gradient(color-mix(in oklch, var(--brand-blue) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--brand-blue) 6%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in oklch, var(--brand-blue) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 60px 12px;
}
.pattern-dimension-lines.is-dark {
  background-image:
    linear-gradient(color-mix(in oklch, var(--brand-blue) 20%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--brand-blue) 20%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in oklch, var(--brand-blue) 12%, transparent) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 60px 12px;
}

/* 6. Circuit trace: right-angle dashed paths like PCB traces */
.pattern-circuit-trace {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 23px, color-mix(in oklch, var(--brand-blue) 7%, transparent) 23px, color-mix(in oklch, var(--brand-blue) 7%, transparent) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, color-mix(in oklch, var(--brand-blue) 7%, transparent) 23px, color-mix(in oklch, var(--brand-blue) 7%, transparent) 24px),
    repeating-linear-gradient(0deg, transparent, transparent 95px, color-mix(in oklch, var(--brand-teal) 10%, transparent) 95px, color-mix(in oklch, var(--brand-teal) 10%, transparent) 96px),
    repeating-linear-gradient(90deg, transparent, transparent 95px, color-mix(in oklch, var(--brand-teal) 10%, transparent) 95px, color-mix(in oklch, var(--brand-teal) 10%, transparent) 96px);
}
.pattern-circuit-trace.is-dark {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 23px, color-mix(in oklch, var(--brand-blue) 10%, transparent) 23px, color-mix(in oklch, var(--brand-blue) 10%, transparent) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, color-mix(in oklch, var(--brand-blue) 10%, transparent) 23px, color-mix(in oklch, var(--brand-blue) 10%, transparent) 24px),
    repeating-linear-gradient(0deg, transparent, transparent 95px, color-mix(in oklch, var(--brand-teal) 18%, transparent) 95px, color-mix(in oklch, var(--brand-teal) 18%, transparent) 96px),
    repeating-linear-gradient(90deg, transparent, transparent 95px, color-mix(in oklch, var(--brand-teal) 18%, transparent) 95px, color-mix(in oklch, var(--brand-teal) 18%, transparent) 96px);
}

/* 7. Topo contour: concentric rings like topographic elevation maps */
.pattern-topo-contour {
  background-image:
    radial-gradient(ellipse 120px 120px at 50% 50%, transparent 30px, color-mix(in oklch, var(--brand-blue) 6%, transparent) 31px, transparent 32px),
    radial-gradient(ellipse 120px 120px at 50% 50%, transparent 55px, color-mix(in oklch, var(--brand-blue) 5%, transparent) 56px, transparent 57px),
    radial-gradient(ellipse 120px 120px at 50% 50%, transparent 80px, color-mix(in oklch, var(--brand-blue) 4%, transparent) 81px, transparent 82px),
    radial-gradient(ellipse 120px 120px at 50% 50%, transparent 105px, color-mix(in oklch, var(--brand-teal) 5%, transparent) 106px, transparent 107px),
    radial-gradient(circle 2px at 50% 50%, color-mix(in oklch, var(--brand-teal) 12%, transparent) 2px, transparent 2px);
  background-size: 240px 240px;
}
.pattern-topo-contour.is-dark {
  background-image:
    radial-gradient(ellipse 120px 120px at 50% 50%, transparent 30px, color-mix(in oklch, var(--brand-blue) 12%, transparent) 31px, transparent 32px),
    radial-gradient(ellipse 120px 120px at 50% 50%, transparent 55px, color-mix(in oklch, var(--brand-blue) 9%, transparent) 56px, transparent 57px),
    radial-gradient(ellipse 120px 120px at 50% 50%, transparent 80px, color-mix(in oklch, var(--brand-blue) 7%, transparent) 81px, transparent 82px),
    radial-gradient(ellipse 120px 120px at 50% 50%, transparent 105px, color-mix(in oklch, var(--brand-teal) 10%, transparent) 106px, transparent 107px),
    radial-gradient(circle 2px at 50% 50%, color-mix(in oklch, var(--brand-teal) 20%, transparent) 2px, transparent 2px);
  background-size: 240px 240px;
}

/* 8. Hash field: dense diagonal hatching like section fills */
.pattern-hash-field {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 7px,
      color-mix(in oklch, var(--brand-blue) 5%, transparent) 7px,
      color-mix(in oklch, var(--brand-blue) 5%, transparent) 8px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 7px,
      color-mix(in oklch, var(--brand-teal) 3%, transparent) 7px,
      color-mix(in oklch, var(--brand-teal) 3%, transparent) 8px
    );
}
.pattern-hash-field.is-dark {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 7px,
      color-mix(in oklch, var(--brand-blue) 8%, transparent) 7px,
      color-mix(in oklch, var(--brand-blue) 8%, transparent) 8px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 7px,
      color-mix(in oklch, var(--brand-teal) 5%, transparent) 7px,
      color-mix(in oklch, var(--brand-teal) 5%, transparent) 8px
    );
}