/*
 * The Theme Kit in Gouache's look. The kit (themes/_shared/assets/css/kit.css) draws every block the theme has no
 * template for, and every module section; this file sets its tokens, linked after kit.css, so the values here win.
 * Change the look here first: the tokens reach every block at once, a rule for one kit class reaches one part.
 *
 * Gouache is a painter's sheet: soft serif headings, buttons shaped like a dab of paint, cards cut a little unevenly,
 * numbers set in blots of colour. The paint itself (washes behind headings, brush strokes, deckled paper edges, the
 * paper's grain) is drawn with masks, and masks are pictures, so they live in theme.css, never here.
 *
 * Rules for this file: it loads nothing, no picture, font or address of any kind (the kit inlines it into module
 * previews; kit_components.test.php fails for one, and also for these words written in a comment);
 * colours only through the palette tokens the kit already reads (--text-primary, --surface, --primary, ...) or
 * color-mix() of them; weights only through the layout's --gouache-heading-weight and --gouache-body-strong.
 *
 * --kit-radius and --kit-button-radius are repeated in this theme's line of the shared button table
 * (themes/_shared/assets/css/resilience.css, --chrome-radius and --chrome-button-radius) so the cookie notice and the
 * phone action bar match the theme's own cards and buttons: theme-chrome.test.mjs compares the two. Change both.
 */

.kit-root {
  --kit-radius: 1rem;
  --kit-radius-sm: 0.75rem;
  /* A dab of paint: a pill pressed a little out of true. Every corner is a pair of radii, so it is never a perfect
     capsule; the browser scales the pairs down together on a short button, keeping the shape. */
  --kit-button-radius: 1.6rem 1.1rem 1.5rem 1.2rem / 1.2rem 1.5rem 1.1rem 1.6rem;
  --kit-input-radius: 0.75rem;
  --kit-chip-radius: 999px;
  --kit-media-radius: 0.6rem;
  --kit-heading-weight: var(--gouache-heading-weight, 400);
  --kit-heading-tracking: -0.005em;
  --kit-button-weight: var(--gouache-body-strong, 700);
  --kit-button-transform: none;
  --kit-eyebrow-tracking: 0.02em;
  --kit-focus: var(--accent-ink, #9a3613);
  --kit-star: var(--accent-ink, #9a3613);
  --kit-card-pad: clamp(1.25rem, 2.2vw, 1.75rem);
  --kit-gap-medium: clamp(1.25rem, 2vw, 1.75rem);
  --kit-gap-large: clamp(2rem, 4vw, 3.25rem);
  --kit-gutter: clamp(1rem, 4vw, 2.25rem);
  --kit-width-normal: 72rem;
  --kit-width-narrow: 46rem;
  --kit-pad-normal: clamp(3.75rem, 2.5rem + 4.5vw, 6.75rem);
  --kit-pad-compact: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  --kit-pad-spacious: clamp(4.75rem, 3rem + 6.5vw, 8.5rem);
  /* Paper lying on paper: a soft shadow under the sheet, a deeper one when a linked card is lifted. */
  --kit-shadow: 0 1px 1px color-mix(in srgb, var(--text-primary, #1d1f2c) 6%, transparent), 0 10px 24px -18px color-mix(in srgb, var(--text-primary, #1d1f2c) 45%, transparent);
  --kit-shadow-hover: 0 2px 2px color-mix(in srgb, var(--text-primary, #1d1f2c) 7%, transparent), 0 22px 36px -22px color-mix(in srgb, var(--text-primary, #1d1f2c) 55%, transparent);
}

/* Headings in the heading face. Sizes are set for ordinary words at 320 px; the shared script is only the net for a long
   word (cms/THEME_DEVELOPMENT.md, rule 1). A line height under about 1.1 cuts marks in a box that clips. */
.kit-heading {
  font-family: var(--font-heading, serif);
  line-height: 1.16;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.12;
}

.kit-heading--2 {
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.6rem);
}

.kit-heading--3 {
  font-size: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem);
  line-height: 1.3;
}

.kit-card__title {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  font-weight: var(--gouache-heading-weight, 400);
  line-height: 1.28;
}

.kit-text--lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
}

/* Buttons: the body face, bold, a touch larger than the kit's. A small button (a row of review links, Next under a list
   of posts) is still 40 px tall: the kit's own 36 px is under what a thumb needs on a phone (verify-theme-stress.mjs,
   button-small). */
.kit-button {
  font-size: 0.9688rem;
  padding-inline: 1.5rem;
}

.kit-button--small {
  min-height: 2.5rem;
}

/* The outline button keeps the words' colour for its line: the accent's line would be a second colour beside the dab of
   the primary button. */
.kit-button--secondary {
  border-width: 2px;
  border-color: var(--kit-text);
  color: var(--kit-text);
}

.kit-button--secondary:hover {
  background: color-mix(in srgb, var(--kit-accent) 12%, transparent);
}

/* Figures (stats_counter, a plan's price) in the heading face. From 1200 px five statistics stand in a row of about 200
   px each: "1500 m²" must stay on one line there, so the figures stop at about 44 px. */
.kit-stat__value {
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.35rem + 1.7vw, 2.75rem);
  font-weight: var(--gouache-heading-weight, 400);
  line-height: 1.1;
}

.kit-stat__label {
  font-size: 0.9375rem;
}

/* Small labels above headings: the accent's readable shade, in the body face, bold, in the words' own case (capitals
   make long Lithuanian words much wider). theme.css sets a dab of paint before each. */
.kit-eyebrow,
.kit-card__eyebrow {
  color: var(--kit-accent-text);
  font-size: 0.875rem;
  font-weight: var(--gouache-body-strong, 700);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* A quotation is spoken in the heading face, upright unless the font palette loads that face's own italic (theme.css). */
.kit-quote__text {
  font-family: var(--font-heading, serif);
  font-style: normal;
  font-size: clamp(1.125rem, 1.05rem + 0.45vw, 1.35rem);
  line-height: 1.5;
}

.kit-quote__author {
  font-weight: var(--gouache-body-strong, 700);
}

/* A step has one lead mark (kit.css). With an icon (the catalogue asks every step for one) the icon leads: here it sits
   in a blot of the accent, each blot pressed in its own shape, and the number is the small label over the title. */
.kit-root .kit-steps .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__body > svg.kit-icon:first-child {
  box-sizing: content-box;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0.85rem;
  border-radius: 58% 42% 55% 45% / 47% 58% 42% 53%;
  background: var(--kit-accent);
  color: var(--kit-on-accent);
}

.kit-root .kit-steps > :nth-child(4n + 2) .kit-card__content > .kit-card__body > svg.kit-icon:first-child { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; transform: rotate(-4deg); }
.kit-root .kit-steps > :nth-child(4n + 3) .kit-card__content > .kit-card__body > svg.kit-icon:first-child { border-radius: 52% 48% 62% 38% / 42% 55% 45% 58%; transform: rotate(3deg); }
.kit-root .kit-steps > :nth-child(4n + 4) .kit-card__content > .kit-card__body > svg.kit-icon:first-child { border-radius: 40% 60% 50% 50% / 55% 40% 60% 45%; transform: rotate(-2deg); }

/* Without an icon (a website written before every step needed one) the number itself leads, in the same blot. */
.kit-steps .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow {
  display: inline-grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  margin-block-end: 0.5rem;
  border-radius: 58% 42% 55% 45% / 47% 58% 42% 53%;
  background: var(--kit-accent);
  color: var(--kit-on-accent);
  font-family: var(--font-heading, serif);
  font-size: 1.3rem;
  font-weight: var(--gouache-heading-weight, 400);
  letter-spacing: 0;
  line-height: 1.2;
}

.kit-steps > :nth-child(4n + 2) .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; transform: rotate(-4deg); }
.kit-steps > :nth-child(4n + 3) .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow { border-radius: 52% 48% 62% 38% / 42% 55% 45% 58%; transform: rotate(3deg); }
.kit-steps > :nth-child(4n + 4) .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow { border-radius: 40% 60% 50% 50% / 55% 40% 60% 45%; transform: rotate(-2deg); }

/* Questions: each one a slip of paper on the page, the answer opening inside it. */
.kit-accordion {
  display: grid;
  gap: 0.75rem;
}

.kit-accordion__item {
  padding-inline: clamp(0.85rem, 2vw, 1.25rem);
  border: 1px solid var(--kit-line);
  border-radius: 1.1rem 0.8rem 1rem 0.9rem;
  background: var(--kit-surface);
}

.kit-accordion__title {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: var(--gouache-heading-weight, 400);
}

/* Portraits and avatars in pebbles of paint rather than perfect circles. */
.kit-avatar {
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
}

/* Fields: paper with a soft edge, the focus ring in the accent's readable shade. */
.kit-input,
.kit-select,
.kit-textarea {
  border-radius: 0.8rem 0.6rem 0.75rem 0.65rem;
}

/* Pictures in cards are cropped like a sheet cut from a pad: the card's own rounded corner at the top. */
.kit-card__media {
  border-radius: 0;
}