/*
 * Ballot Brawl — Texture System
 * Version: 0.1.0
 *
 * Halftone dot pattern and newsprint grain implemented as
 * CSS background patterns. No external image dependencies.
 *
 * Rule: textures should be subtle. If the texture is the first
 * thing a viewer notices, it's too heavy.
 */

/* ─── Halftone Dot Pattern ─── */
/* Uses radial-gradient to create a dot grid */
/* 4px dots at 6px intervals, editorial print feel */

.texture-halftone {
  background-image:
    radial-gradient(circle, var(--color-ink) 0.8px, transparent 0.8px);
  background-size: 6px 6px;
  background-position: 0 0;
  opacity: var(--halftone-opacity);
  pointer-events: none;
}

/* Halftone as an overlay pseudo-element — apply to card backgrounds */
.texture-halftone-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--color-ink) 0.8px, transparent 0.8px);
  background-size: 6px 6px;
  background-position: 0 0;
  opacity: var(--halftone-opacity);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

/* ─── Newsprint Grain ─── */
/* Subtle noise texture using multiple tiny gradients */
/* Applied to neutral surfaces to avoid sterile digital feel */

.texture-grain {
  background-image:
    repeating-conic-gradient(
      var(--color-ink) 0% 25%,
      transparent 0% 50%
    );
  background-size: 3px 3px;
  opacity: var(--grain-opacity);
  pointer-events: none;
}

.texture-grain-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-conic-gradient(
      var(--color-ink) 0% 25%,
      transparent 0% 50%
    );
  background-size: 3px 3px;
  opacity: var(--grain-opacity);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

/* ─── Bold Divider Rules ─── */
/* Tabloid layout energy between card sections */

.rule {
  border: none;
  height: var(--rule-width);
  background-color: var(--color-rule);
  width: 100%;
  margin: var(--space-3) 0;
}

.rule-light {
  border: none;
  height: var(--rule-width-light);
  background-color: var(--color-rule-light);
  width: 100%;
  margin: var(--space-2) 0;
}

.rule-team-red {
  background-color: var(--color-red-team);
}

.rule-team-blue {
  background-color: var(--color-blue-team);
}