/*
 * The Theme Kit in Folio'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.
 *
 * The look: printed pages. Flat paper cards under a hairline, no shadows; small corners; headings in the heading face
 * at a book's sizes; small labels in the heading face too, in the accent's readable shade (and in its own italic where
 * the font palette loads one: html.folio-italic, written by the layout); plain rectangular buttons.
 *
 * 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 --folio-heading-weight and --folio-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: 0.25rem;
  --kit-radius-sm: 0.25rem;
  --kit-button-radius: 0.25rem;
  --kit-input-radius: 0.25rem;
  --kit-media-radius: 0.25rem;
  --kit-heading-weight: var(--folio-heading-weight, 500);
  --kit-heading-tracking: -0.012em;
  --kit-button-weight: var(--folio-body-strong, 600);
  --kit-button-tracking: 0.01em;
  --kit-button-transform: none;
  --kit-focus: var(--accent-ink, #7a5413);
  --kit-star: var(--accent-ink, #7a5413);
  --kit-card-pad: clamp(1.35rem, 2.2vw, 1.85rem);
  --kit-gap-medium: clamp(1.25rem, 2vw, 1.75rem);
  --kit-gap-large: clamp(1.75rem, 3.2vw, 2.75rem);
  --kit-gutter: var(--folio-gutter, clamp(1.25rem, 4.5vw, 3.5rem));
  --kit-width-normal: var(--folio-width, 76rem);
  --kit-width-narrow: 44rem;
  --kit-pad-normal: clamp(3.75rem, 2.75rem + 4.5vw, 6.75rem);
  --kit-pad-compact: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --kit-pad-spacious: clamp(4.75rem, 3.25rem + 6.5vw, 8.75rem);
  --kit-measure: 64ch;
  /* Paper, not cards floating over it: a hairline does the work of a shadow. */
  --kit-shadow: none;
  --kit-shadow-hover: none;
}

/* A grid's cards stand closer than a section's parts: the large gap parts a heading from what follows it, and the
   same gap between four cards would leave each too narrow for an ordinary word beside the rail. The grid works its
   columns out from --kit-gap, so the gap is set there. */
.kit-grid.kit-gap--large {
  --kit-gap: clamp(1.25rem, 2.2vw, 2rem);
}

/* Headings in the heading face, at a book's sizes: large enough to lead, never a poster. 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.14;
  text-wrap: balance;
}

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

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

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

/* Small labels above headings: the heading face in the accent's readable shade, the size of running text, not in
   capitals (capitals make long Lithuanian words much wider). */
.kit-eyebrow,
.kit-card__eyebrow {
  color: var(--kit-accent-text);
  font-family: var(--font-heading, serif);
  font-size: 1.0625rem;
  font-synthesis: none;
  font-weight: var(--folio-heading-weight, 500);
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.kit-card__eyebrow {
  font-size: 1rem;
}

html.folio-italic .kit-eyebrow,
html.folio-italic .kit-card__eyebrow {
  font-style: italic;
}

.kit-card__title {
  font-size: 1.3rem;
  line-height: 1.24;
}

/* Buttons: the theme's own plain rectangle (theme.css, .folio-button). The second button is an outline in the words'
   colour, which follows a coloured band by itself. A small button 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 {
  min-height: 3rem;
  padding-inline: 1.5rem;
  line-height: 1.3;
}

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

.kit-button--secondary {
  border-color: color-mix(in srgb, var(--kit-text) 55%, transparent);
  color: var(--kit-text);
}

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

/* Figures (stats_counter, a plan's price) in the heading face. From 1200 px of page five statistics stand in a row of
   about 200 px each: the kit's own size (up to 52 px) splits "1500 m²" there, so the figures here 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(--folio-heading-weight, 500);
  line-height: 1.1;
}

.kit-price__amount {
  font-family: var(--font-heading, serif);
  font-weight: var(--folio-heading-weight, 500);
}

/* What somebody said, in the heading face, in its own italic where the font palette has one. */
.kit-quote__text {
  font-family: var(--font-heading, serif);
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: var(--folio-heading-weight, 500);
  line-height: 1.45;
}

html.folio-italic .kit-quote__text {
  font-style: italic;
}

/* Links in text: the accent's readable shade over a fine line. */
.kit-link {
  font-weight: var(--folio-body-strong, 600);
  text-underline-offset: 0.28em;
}