/* ─────────────────────────────────────────────────────────────────────────
 * dots.css — the dot-matrix visual standard
 *
 * "rmorenodot" — the dot is the brand, so surfaces, edges and dividers are
 * built FROM dots. This file ships the reusable expression of that idea:
 *   · tokens for a tileable dot grid (pitch / size / color)
 *   · utility classes that paint any element as a dot matrix
 *   · dot dividers and dot rings that replace hairline rules and solid borders
 *
 * It's pure CSS background-image (radial-gradient), so it costs nothing per
 * element and tints with currentColor / any token. For ANIMATED or per-dot
 * control, use the React <DotField> / <DotIcon> components instead.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* grid geometry — pitch is the dot-to-dot distance, size is the radius */
  --dot-pitch: 7px;          /* @kind spacing */
  --dot-pitch-sm: 5px;       /* @kind spacing */
  --dot-pitch-lg: 12px;      /* @kind spacing */
  --dot-pitch-xl: 18px;      /* @kind spacing */
  --dot-size: 1.2px;         /* @kind spacing */
  --dot-size-lg: 1.7px;      /* @kind spacing */

  /* default dot ink — inherits the element's text color unless overridden */
  --dot-ink: currentColor;

  /* the canonical dot-matrix image — set --dot-ink / --dot-size to retint.
   * Pair with a background-size of --dot-pitch (the utilities below do this). */
  --dot-texture: radial-gradient(circle at center,
    var(--dot-ink) var(--dot-size),
    transparent calc(var(--dot-size) + 0.6px));
}

/* ══ Surface — paint an element as a tiled dot matrix ═════════════════════ */
.dot-surface {
  background-image: var(--dot-texture);
  background-size: var(--dot-pitch) var(--dot-pitch);
  background-position: center;
}
.dot-surface-sm { --dot-pitch: var(--dot-pitch-sm); }
.dot-surface-lg { --dot-pitch: var(--dot-pitch-lg); --dot-size: var(--dot-size-lg); }
.dot-surface-xl { --dot-pitch: var(--dot-pitch-xl); --dot-size: var(--dot-size-lg); }

/* Faint backdrop helper — drop behind content (absolute, inset:0). */
.dot-backdrop {
  background-image: var(--dot-texture);
  background-size: var(--dot-pitch) var(--dot-pitch);
  background-position: center;
  opacity: 0.10;
  pointer-events: none;
}

/* ══ Divider — a single row of dots, replaces the hairline <hr> ═══════════ */
.dot-divider {
  height: var(--dot-pitch);
  background-image: var(--dot-texture);
  background-size: var(--dot-pitch) var(--dot-pitch);
  background-position: center;
  background-repeat: repeat-x;
  border: 0;
  width: 100%;
}
.dot-divider-v {
  width: var(--dot-pitch);
  height: 100%;
  background-image: var(--dot-texture);
  background-size: var(--dot-pitch) var(--dot-pitch);
  background-position: center;
  background-repeat: repeat-y;
  border: 0;
}

/* ══ Ring — a dotted perimeter for focus / selection ═════════════════════ */
.dot-ring {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--dot-ink);
}

/* Accessible focus everywhere: a crisp dotted-feel ring in the accent color. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px dotted var(--cat-sienna);
  outline-offset: 3px;
}

/* ══ Button — the dot standard applied ════════════════════════════════════
 * Hover/active states for <Button>. The `dotted` variant shows a dot matrix at
 * rest and fills to its solid color on hover (--btn-fill / --btn-on are set by
 * the component per intent).                                                   */
.rmd-btn {
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.rmd-btn__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.rmd-btn:not(.rmd-btn--link):hover { opacity: 0.9; }
.rmd-btn:not(.rmd-btn--link):active { transform: translateY(1px); }
.rmd-btn--link:hover { opacity: 0.7; }

/* dotted: a solid fill fades in over the dot matrix on hover */
.rmd-btn--dotted { overflow: hidden; }
.rmd-btn--dotted::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--btn-fill);
  opacity: 0;
  transition: opacity var(--motion-duration-base) var(--ease-out);
}
.rmd-btn--dotted:hover {
  opacity: 1;
  color: var(--btn-on);
}
.rmd-btn--dotted:hover::after { opacity: 1; }