@import url("sauleda-customer.css");

/**
 * Sauleda Store typography and bounded base rules.
 *
 * Only the storefront font is global. Element normalization is restricted to
 * .sauleda-ui so third-party module controls and media keep their native CSS.
 */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk/space-grotesk-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: var(--sauleda-font-family);
  color: var(--sauleda-color-text);
}

.sauleda-ui {
  color: var(--sauleda-color-text);
  font-family: var(--sauleda-font-family);
  font-size: 1rem;
  line-height: var(--sauleda-line-height-body);
}

.sauleda-ui :where(h1, h2, h3, h4, h5, h6) {
  color: var(--sauleda-color-ink);
  font-family: inherit;
  font-weight: var(--sauleda-font-weight-medium);
  line-height: var(--sauleda-line-height-heading);
}

.sauleda-ui :where(p, ul, ol):last-child {
  margin-bottom: 0;
}

.sauleda-ui :where(a) {
  color: var(--sauleda-color-primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

/* Controls inherit typography only inside content owned by this theme. */
.sauleda-ui :where(button, input, select, textarea) {
  font: inherit;
}

/* Shared focus treatment; module controls outside the namespace are untouched. */
:where(
    .sauleda-button,
    .sauleda-card a,
    .sauleda-ui a,
    .sauleda-ui button,
    .sauleda-ui input,
    .sauleda-ui select,
    .sauleda-ui textarea
  ):focus-visible {
  outline: 0.125rem solid var(--sauleda-focus-color);
  outline-offset: 0.1875rem;
  box-shadow: var(--sauleda-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  :where(.sauleda-button, .sauleda-card) {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}