/* ==========================================================================
   SECTION KIT VISUAL CONTRACT. This is the only file that holds a colour value.
   Blocks read these tokens and never hard-code a colour.

   TO RECOLOUR, do not edit colours by hand. Run this on the tokens.css your page links:
     node scripts/recolour.mjs sections/tokens.css --brand "#hex" --second "#hex"
   It takes two to four inputs (brand, second, paper, ink), derives every other
   colour, computes their contrast and removes the stock themes. check.mjs re-derives
   them and fails on any leftover colour the brand did not choose.

   Tokens are set on .sk, never on :root, so nothing leaks into the host page.
   Stock themes: data-sk-theme="kiln|rhubarb|nocturne" on a block or any ancestor.
   No attribute means Kiln.

   Pairs that must keep contrast (4.5:1 for small text, 3:1 for large text and rings):
   ink, ink-soft and accent-text on ground, surface and tint; focus on those three;
   on-accent on accent; on-second on second; on-third on third;
   on-night and on-night-soft on night. Focus rings take the on- colour of the field they sit on.
   ========================================================================== */
.sk {
  /* PALETTE:BEGIN */
  /* BRAND INPUTS: change these by rerunning scripts/recolour.mjs. Everything below them is derived. */
  --sk-brand: #1f4d36;
  --sk-brand-2: #f7c64f;
  --sk-paper: #faf6ef;
  --sk-brand-ink: auto;
  /* DERIVED, do not edit by hand: check.mjs re-derives these and fails on any difference. Tightest contrast: ink-soft on tint 6.28:1, ink-soft on ground 7.33:1, ink-soft on surface 7.65:1, accent-text on tint 7.68:1. */
  --sk-ground: #faf6ef;
  --sk-surface: #fdfbf8;
  --sk-tint: #e5e6dd;
  --sk-ink: #0a2015;
  --sk-ink-soft: #46554a;
  --sk-accent: #1f4d36;
  --sk-on-accent: #fdfbf8;
  --sk-accent-text: #1f4d36;
  --sk-second: #f7c64f;
  --sk-on-second: #0a2015;
  --sk-third: #f8cd6c;
  --sk-on-third: #0a2015;
  --sk-night: #082617;
  --sk-on-night: #fdfbf8;
  --sk-on-night-soft: #c7ccc5;
  --sk-focus: #1f4d36;
  --sk-art-1: #1f4d36;
  --sk-art-2: #f7c64f;
  --sk-art-3: #b58700;
  --sk-art-4: #faefd9;
  --sk-art-5: #0a2015;
  /* PALETTE:END */

  /* TYPE FACES: system stacks only, nothing to download. CJK falls through per glyph. */
  --sk-font-display: Rockwell, "Rockwell Nova", "Roboto Slab", Georgia, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", serif;
  --sk-font-body: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --sk-weight-display: 700;

  /* TYPE SCALE: px and container width only, so a host html{font-size:62.5%} cannot shrink it. */
  --sk-text-xs: 13px;
  --sk-text-sm: 15px;
  --sk-text-md: 17px;
  --sk-text-lg: clamp(18px, 1.9cqi, 22px);
  --sk-text-xl: clamp(21px, 2.5cqi, 30px);
  --sk-text-title: clamp(27px, 4.6cqi, 58px);
  --sk-text-display: clamp(34px, 5.7cqi, 76px);
  --sk-text-poster: clamp(37px, 10.6cqi, 150px);
  --sk-text-mega: clamp(56px, 15.5cqi, 220px);
  --sk-text-quote: clamp(25px, 3.7cqi, 48px);
  --sk-track-display: -0.015em;
  --sk-line-display: 1.04;
  --sk-line-body: 1.55;

  /* SHAPE */
  --sk-radius-sm: 4px;
  --sk-radius-md: 12px;
  --sk-radius-lg: 22px;
  --sk-radius-arch: 999px;
  --sk-stroke: 2px;
  --sk-stroke-bold: 4px;

  /* SPACE */
  --sk-max: 1280px;
  --sk-gutter: clamp(20px, 5cqi, 72px);
  --sk-section-y: clamp(56px, 8cqi, 112px);
  --sk-gap: clamp(16px, 2.4cqi, 32px);

  /* MOTION: all timings live here. Reduced motion sets them to zero below. */
  --sk-motion-fast: 140ms;
  --sk-motion-base: 280ms;
  --sk-motion-slow: 620ms;
  --sk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sk-tilt: -8deg;

  /* JOINING A HOST PAGE. See "Joining the host page" in SKILL.md. */
  --sk-host-header: 0px;   /* height of the host header above the hero: keeps its action on the first screen */
  --sk-join-radius: 12px;   /* corner radius of a block with data-sk-seam="card": match the host's cards */
  --sk-join-space: 24px;   /* space around a block with data-sk-seam="gap" or "card": match the host's rhythm */
  --sk-join-max: 1200px;     /* widest a card-seamed block may be */
}

/* THEMES:BEGIN */
/* Stock themes removed: this page uses its own brand. */
/* THEMES:END */

@media (prefers-reduced-motion: reduce) {
  .sk, .sk[data-sk-theme], [data-sk-theme] .sk {
    --sk-motion-fast: 0ms;
    --sk-motion-base: 0ms;
    --sk-motion-slow: 0ms;
  }
}