/*
 * Universal: the Theme Kit in Universal's own look. Linked after themes/_shared/assets/css/kit.css, so the
 * variables set here replace its defaults for every module section.
 *
 * Universal is slightly rounded: Tailwind's rounded-lg on buttons and fields, rounded-xl on cards, a soft
 * shadow instead of a border, and the same page width and gutters as its own blocks (max-w-7xl, px-4 sm:px-6 lg:px-8).
 */

.kit-root {
  --kit-radius: 0.75rem;
  --kit-radius-sm: 0.5rem;
  --kit-card-pad: 1.5rem;
  --kit-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --kit-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --kit-speed: 300ms;
  --kit-heading-weight: 700;
  --kit-width-normal: 76rem;
  --kit-width-wide: 88rem;
  --kit-gutter: 1rem;
  --kit-pad-normal: clamp(4rem, 7vw, 6rem);
}

@media (min-width: 40rem) {
  .kit-root { --kit-gutter: 1.5rem; }
}

@media (min-width: 64rem) {
  .kit-root { --kit-gutter: 2rem; }
}

/* Cards in Universal have a shadow and no line. */
.kit-card--surface { border-color: transparent; }

/* Buttons: px-6 py-3, font-semibold. */
.kit-button { padding: 0.75rem 1.5rem; }
.kit-button--small { padding: 0.45rem 1rem; }

/* Fields: a light grey border, and an accent ring on focus. */
.kit-input {
  padding: 0.75rem 1rem;
  border-color: color-mix(in srgb, var(--kit-text) 16%, transparent);
}

.kit-input:focus {
  border-color: var(--kit-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kit-accent) 40%, transparent);
}

.kit-dialog { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35); }

/* The shop components: hairlines in the same light grey as the fields, and the dialog's soft shadow on drawers. */
.kit-quantity,
.kit-option__face,
.kit-filter-chip { border-color: color-mix(in srgb, var(--kit-text) 16%, transparent); }

.kit-drawer.is-ready { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35); }
.kit-badge { letter-spacing: 0.05em; }