/* ============================================================
   Ladybug Lane — Base element defaults & brand utilities
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; color: var(--text-strong); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

::selection { background: var(--blossom-300); color: var(--ink-950); }

/* ---- Brand textures ------------------------------------- */

/* Signature polka-dot field (white dots on pink, echoing the shell) */
.ll-dots {
  background-color: var(--blossom-200);
  background-image: radial-gradient(var(--white) 22%, transparent 23%);
  background-size: 26px 26px;
  background-position: 0 0;
}
.ll-dots--crimson {
  background-color: var(--crimson-500);
  background-image: radial-gradient(rgba(255,255,255,0.92) 22%, transparent 23%);
}

/* Dashed "flight path" divider (the ladybug's dotted trail) */
.ll-trail {
  border: none;
  height: 0;
  border-top: var(--border-bold) dashed var(--ink-950);
  opacity: 0.75;
}

/* Hand-lettered brand word */
.ll-wordmark {
  font-family: var(--font-display);
  color: var(--crimson-500);
  letter-spacing: 0.01em;
}

/* Chunky sticker outline — reusable card treatment */
.ll-sticker {
  border: var(--border-chunk) solid var(--ink-950);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  background: var(--surface-card);
}

/* Eyebrow / kicker label */
.ll-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--crimson-600);
}

/* Focus-visible default */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}