/* ============================================================
   LESTER'S — GRAPHIC DEVICES & TEXTURE
   Everything reads PRINTED and ANALOG.
   NO drop shadows · NO gradients-as-fills · NO glows.
   (Radial dot fields below are halftone PRINT texture, not
   decorative gradients.)
   ============================================================ */
:root {
  /* Halftone dot field — tiled, low opacity, multiplies onto ground */
  --halftone-size: 5px;
  --halftone-dot:  rgba(12, 35, 27, 0.10);   /* dark dots for cream grounds */
  --halftone-dot-light: rgba(242, 230, 203, 0.10); /* cream dots for dark grounds */

  /* Checkerboard trim cell */
  --check-size: 16px;
}

/* ---- Halftone grain overlay -------------------------------- */
.lx-halftone {
  position: relative;
}
.lx-halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--halftone-dot) 32%, transparent 33%);
  background-size: var(--halftone-size) var(--halftone-size);
  mix-blend-mode: multiply;
}
.lx-halftone--light::after {
  background-image: radial-gradient(var(--halftone-dot-light) 32%, transparent 33%);
  mix-blend-mode: screen;
}

/* ---- Deco double border ------------------------------------ */
.lx-double-border {
  border: var(--border-bold) solid currentColor;
  outline: var(--border-hair) solid currentColor;
  outline-offset: 4px;
}

/* ---- Deco rule line (single / double) ---------------------- */
.lx-rule {
  border: 0;
  border-top: var(--border-rule) solid currentColor;
}
.lx-rule--double {
  border: 0;
  border-top: var(--border-hair) solid currentColor;
  border-bottom: var(--border-hair) solid currentColor;
  height: 4px;
}

/* ---- Sunburst / fan (radiating rays from Deco architecture) -
   repeating-conic is a hard-edged ray field, not a soft gradient. */
.lx-sunburst {
  background-image: repeating-conic-gradient(
    from 0deg,
    var(--ray, rgba(230,169,43,0.28)) 0deg 6deg,
    transparent 6deg 12deg
  );
}

/* ---- Stepped / fan motif (top trim) ------------------------ */
.lx-stepped {
  --step: 22px;
  height: var(--step);
  background:
    linear-gradient(135deg, currentColor 25%, transparent 25.5%) calc(var(--step) / -2) 0,
    linear-gradient(225deg, currentColor 25%, transparent 25.5%) calc(var(--step) / -2) 0;
  background-size: var(--step) var(--step);
}

/* ---- Button interaction states (inline styles can't do :hover) ---- */
.lx-btn:hover { filter: brightness(0.92); }
.lx-btn[data-variant="ghost"]:hover { filter: none; opacity: 0.7; }
.lx-btn[data-variant="secondary"][data-ground="paper"]:hover { filter: brightness(0.92); }
.lx-btn[data-variant="secondary"][data-ground="dark"]:hover { background: var(--cream) !important; color: var(--green-ink) !important; filter: none; }
.lx-btn:active { transform: translateY(1px) !important; }
.lx-input::placeholder { color: currentColor; opacity: 0.45; }

/* ---- Mascot as a recolourable mask (reliable for <img>-free recolouring) ---- */
lester-mascot { display: inline-block; }
.lx-mascot {
  display: inline-block;
  aspect-ratio: 242 / 304;
  background-color: currentColor;
  -webkit-mask: url("../assets/mascot.svg") center / contain no-repeat;
  mask: url("../assets/mascot.svg") center / contain no-repeat;
}

/* ---- Checkerboard trim ------------------------------------- */
.lx-checker {
  background-image:
    conic-gradient(currentColor 90deg, transparent 90deg 180deg, currentColor 180deg 270deg, transparent 270deg);
  background-size: var(--check-size) var(--check-size);
}