/*
 * The Theme Kit in Riviera'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: sunlit and airy. Generous space, headings in the heading face at a light weight, small labels in small
 * spaced capitals in the accent's readable shade, each led by a tiny sun on a horizon; cards as white sheets with soft
 * corners and no shadow until they are pointed at; pictures with soft corners; slim pill buttons with their labels in
 * spaced capitals; what people said in the heading face, in its own italic where the font palette has one.
 *
 * 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 --riviera-heading-weight and --riviera-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: 1.25rem;
  --kit-radius-sm: 0.75rem;
  --kit-button-radius: 999px;
  --kit-input-radius: 0.75rem;
  --kit-media-radius: 1.25rem;
  --kit-heading-weight: var(--riviera-heading-weight, 300);
  --kit-heading-tracking: -0.01em;
  --kit-button-weight: var(--riviera-body-strong, 600);
  --kit-button-tracking: 0.14em;
  --kit-button-transform: uppercase;
  --kit-eyebrow-tracking: 0.2em;
  --kit-focus: var(--accent-ink, #185b8f);
  --kit-star: var(--accent-ink, #185b8f);
  --kit-card-pad: clamp(1.4rem, 2.2vw, 1.9rem);
  --kit-gap-medium: clamp(1.25rem, 2vw, 1.75rem);
  --kit-gap-large: clamp(2.25rem, 4.2vw, 3.5rem);
  --kit-gutter: clamp(1.25rem, 4.5vw, 3rem);
  --kit-width-normal: 74rem;
  --kit-width-narrow: 44rem;
  --kit-pad-normal: clamp(4rem, 2.75rem + 5vw, 7.5rem);
  --kit-pad-compact: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);
  --kit-pad-spacious: clamp(5rem, 3.25rem + 7vw, 9.5rem);
  --kit-measure: 62ch;
  /* Sheets in the sun: no shadow at rest, a soft one when pointed at. */
  --kit-shadow: none;
  --kit-shadow-hover: 0 22px 44px -28px color-mix(in srgb, var(--text-primary, #10233a) 42%, transparent);
}

/* 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. 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.4vw, 2.25rem);
}

/* Headings in the heading face, light and airy. 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.12;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.25rem);
  line-height: 1.08;
}

.kit-heading--2 {
  font-size: clamp(1.95rem, 1.35rem + 2.3vw, 3.15rem);
}

.kit-heading--3 {
  font-size: clamp(1.3rem, 1.15rem + 0.55vw, 1.6rem);
  line-height: 1.24;
}

/* Small labels above headings: small spaced capitals in the body face, in the accent's readable shade, led by a tiny
   sun on its horizon (a half disc on a fine line, drawn with gradients). The capitals are small, so a long Lithuanian
   word still fits a phone; a long label wraps under its mark. */
.kit-eyebrow,
.kit-card__eyebrow {
  color: var(--kit-accent-text);
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-weight: var(--riviera-body-strong, 600);
  letter-spacing: var(--kit-eyebrow-tracking);
  line-height: 1.5;
  text-transform: uppercase;
}

.kit-eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 0.4rem;
  margin-inline-end: 0.7rem;
  background:
    radial-gradient(circle at 50% 100%, currentColor 0 0.3rem, transparent calc(0.3rem + 0.5px)) center bottom / 0.62rem 0.32rem no-repeat,
    linear-gradient(currentColor, currentColor) center bottom / 100% 1px no-repeat;
  vertical-align: 0.12em;
}

.kit-card__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

.kit-card__title {
  font-size: clamp(1.25rem, 1.12rem + 0.4vw, 1.45rem);
  line-height: 1.22;
}

/* A question opens on a fine line, in the heading face. */
.kit-accordion__title {
  padding-block: 1.2rem;
  font-family: var(--font-heading, serif);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  font-weight: var(--riviera-heading-weight, 300);
  line-height: 1.35;
}

/* Lead lines under a heading: a little larger and airier than running text. */
.kit-text--lead {
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
}

/* Cards: white sheets with soft corners. On the page's own colour a fine line keeps them apart from it; on the sand and
   on a coloured band they stand as they are. */
.kit-card--surface {
  border-color: color-mix(in srgb, var(--kit-line) 70%, transparent);
}

.kit-section--muted .kit-card--surface {
  border-color: transparent;
}

/* Buttons: the theme's slim pill (theme.css, .riviera-button) with its label in small spaced capitals. The second button
   is a fine 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.65rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.kit-button--small {
  min-height: 2.5rem;
  padding-inline: 1.15rem;
  font-size: 0.75rem;
}

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

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

/* Figures (stats_counter, a plan's price) in the heading face, light. From 1200 px 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 46 px. */
.kit-stat__value {
  font-family: var(--font-heading, serif);
  font-size: clamp(2.2rem, 1.5rem + 1.8vw, 2.9rem);
  font-weight: var(--riviera-heading-weight, 300);
  line-height: 1.1;
}

.kit-stat__label {
  font-size: 0.75rem;
  font-weight: var(--riviera-body-strong, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

/* 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.45rem);
  font-synthesis: none;
  font-weight: var(--riviera-heading-weight, 300);
  line-height: 1.5;
}

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

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