/* ============================================================
   components/divider.css — .dd-divider
   Soft section separators: gradient hairline, coral glow, and a
   film-sprocket dot row (the dot motif). All token-driven.
   ============================================================ */

.dd-divider {
  border: 0;
  height: 1px;
  margin: var(--space-10) 0;
  background: linear-gradient(to right, transparent, var(--border), transparent);
}

/* Coral glow line — a touch more presence between pink moments. */
.dd-divider--glow {
  height: 2px;
  background: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--accent) 70%, transparent),
    transparent);
}

/* Film-sprocket / perforation — a centered row of coral dots. */
.dd-divider--sprocket {
  height: 12px;
  background: none;
  background-image: radial-gradient(circle, var(--coral-200) 0 3px, transparent 4px);
  background-size: 22px 12px;
  background-repeat: repeat-x;
  background-position: center;
}

/* Tighten/loosen the rhythm. */
.dd-divider--tight { margin: var(--space-6) 0; }
.dd-divider--loose { margin: var(--space-13) 0; }