/* kit v1.9.0 — generated by sync-kit; edit kit/ and re-sync */
/* kit — the ROLE tier.
 *
 * The shared vocabulary every component reads. Components reference these names and
 * nothing else: never a palette token, never a hex. That single rule is what makes
 * brand consistency and code consistency the same mechanism — a component is
 * brand-correct precisely because it never names a brand.
 *
 * Layering:
 *   1. palette   brands/<brand>/tokens.css  →  --sl-wren: #40362a       (brand-named)
 *   2. roles     THIS FILE                  →  --primary: var(--sl-wren) (generic)
 *   3. component the component's own CSS    →  --ba-pos: 50%            (prefixed)
 *
 * The values below are NEUTRAL PLACEHOLDERS so a page renders legibly before its brand
 * layer is wired. Every colour role is overridden by brands/<brand>/tokens.css, which is
 * GENERATED by scripts/build-tokens.mjs from brands/<brand>/roles.map.json — never
 * hand-authored. All five brands have one (P1a, 2026-08-21); brands/ROLE-TIER.md is the
 * design record, and the map is the translation artefact, because no brand's own guidance
 * names this vocabulary — slac's design.md §2.3 names --bg-1/--fg-1..4 for the same job.
 *
 * ⚠ --primary is NOT a focus-ring role. It is not re-declared by .section--dark below, and
 * for slac, pww and plmc --bg-inverse IS --primary — a --primary ring in a dark section
 * measures 1.00:1 there. Focus indicators paint --btn-outline-border, which means "the
 * boundary of a control", is budgeted at 3:1 on --bg, and IS re-declared on dark.
 * See ROLE-TIER.md §Findings 5.
 *
 * Shopify: a `snippets/lp-tokens.liquid` adapter maps the theme's color_scheme output onto
 * these same names, so component CSS is identical in both targets. Dawn emits comma
 * triplets (--color-foreground: 18,18,18); the adapter converts them to real colour values
 * at the boundary, so no component ever sees a triplet.
 */

:root {
  /* ---- brand colours (roles) ---------------------------------------- */
  --primary: #40362a;
  --primary-hover: #2f281f;
  --secondary: #7a6856;
  --tertiary: #bca58d;
  --accent: #bca58d;
  --accent-strong: #7a6856;

  /* ---- surfaces ----------------------------------------------------- */
  --bg: #f1f0ea;          /* page background — never pure white */
  --bg-2: #e4dace;        /* subtle card / section lift */
  --bg-3: #cfcabd;        /* deep panels, image placeholders */
  --bg-inverse: #40362a;  /* dark surfaces */

  /* ---- text --------------------------------------------------------- */
  --text-c: #212322;      /* body text — never #000 */
  --text-muted: #7a6856;
  --text-inverse: #f1f0ea;

  /* ---- lines -------------------------------------------------------- */
  --border: #cfcabd;
  --border-strong: #b5ab9b;
  --border-inverse: #7a6856;

  /* ---- status (warm, per brand guidance — not stock green/yellow) ---- */
  --status-positive: #7a6856;
  --status-caution: #bca58d;
  --status-critical: #8a4a3a;

  /* ---- buttons ------------------------------------------------------ */
  --btn-primary: var(--primary);
  --btn-primary-hover: var(--primary-hover);
  --btn-primary-text: var(--text-inverse);
  --btn-secondary: transparent;
  --btn-secondary-hover: var(--bg-2);
  --btn-secondary-text: var(--primary);
  --btn-outline: transparent;
  --btn-outline-border: var(--primary);
  --btn-outline-text: var(--primary);
  --btn-radius: 2px;
  --btn-pad-block: 0.875rem;
  --btn-pad-inline: 1.75rem;
  --btn-weight: 500;
  --btn-tracking: 0.04em;

  /* ---- type --------------------------------------------------------- */
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid scale — clamp() bridges, not breakpoints. Automatic.css's convention:
     --text-<desktop>-to-<mobile> reads as "xl on desktop, s on mobile". */
  --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8rem);
  --text-s: clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem);
  --text-m: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-l: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.9rem + 3vw, 4rem);
  --text-xl-to-s: clamp(0.875rem, 0.5rem + 2vw, 1.5rem);
  --text-2xl-to-m: clamp(1rem, 0.4rem + 3vw, 2rem);

  /* ---- space -------------------------------------------------------- */
  --space-xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.75rem);
  --space-s: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
  --space-m: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
  --space-l: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  --space-xl: clamp(2.5rem, 2rem + 2.4vw, 4rem);
  --space-2xl: clamp(3.5rem, 2.6rem + 4vw, 6rem);
  --space-3xl: clamp(5rem, 3.5rem + 6vw, 9rem);
  --space-xl-to-m: clamp(1rem, 0.2rem + 4vw, 4rem);
  --space-2xl-to-l: clamp(1.5rem, 0.3rem + 6vw, 6rem);

  /* ---- layout / motion ---------------------------------------------- */
  --container: 1200px;
  --measure: 68ch;        /* readable line length */
  --radius: 2px;
  --radius-l: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 400ms;
  --dur-fast: 200ms;
}

/* Light/dark is a SECTION CONTEXT, not a pair of background tokens.
 *
 * A flat --light-bg/--dark-bg pair pushes "which background am I on?" into every
 * component. Re-declaring the role tier for a subtree instead keeps components
 * context-free: they always paint var(--bg) and var(--text-c) and are correct in both.
 * These pages already used --fg-inverse / --bg-inverse / --border-inverse; this promotes
 * that pattern to the convention rather than adding a parallel one. */
/* A role left out of this block keeps the value it had on a light page, which is a bug and not
 * a default: --btn-primary-hover used to do exactly that, so a primary button in a dark section
 * inverted its fill on hover while its label stayed dark — 1.1–2.1:1 across the five brands.
 *
 * What can be fixed HERE is only what derives from a role this block does not itself re-declare.
 * `--accent: color-mix(in srgb, var(--accent) 70%, …)` is a self-reference, which CSS treats as a
 * cycle: the property goes invalid at computed-value time rather than resolving to the light value
 * mixed. So --accent, --accent-strong and the three --status-* roles — whose dark values are not a
 * function of any other role — are supplied per brand, in the `dark` block of
 * brands/<brand>/roles.map.json, where they resolve from the palette tier this block never touches.
 *
 * The rule: derivable from another role → here. Needs the palette → the brand map. */
.section--dark {
  --bg: var(--bg-inverse);
  --bg-2: color-mix(in srgb, var(--bg-inverse) 88%, white);
  /* --bg-2 is a card LIFT, so on dark it lightens. --bg-3 is a DEEP panel, so on dark it
   * deepens — the two roles diverge here, and deliberately: lightening bg-3 as well drops
   * --text-c to 3.89:1 on Prologue, whose --bg-inverse (Pine) is a mid-tone rather than a
   * near-black. Deepening can only ever raise the text contrast, whatever the brand. */
  --bg-3: color-mix(in srgb, var(--bg-inverse) 88%, black);
  --text-c: var(--text-inverse);
  --text-muted: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  --border: var(--border-inverse);
  --border-strong: color-mix(in srgb, var(--text-inverse) 40%, var(--bg-inverse));
  --btn-primary: var(--text-inverse);
  --btn-primary-hover: color-mix(in srgb, var(--text-inverse) 85%, var(--bg-inverse));
  --btn-primary-text: var(--bg-inverse);
  --btn-secondary-text: var(--text-inverse);
  --btn-outline-border: var(--text-inverse);
  --btn-outline-text: var(--text-inverse);
}

/* Translucency uses color-mix() so roles stay real colour values — no shadow twin per
 * role, and nothing breaks when the Shopify adapter supplies the same names. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 1ms;
    --dur-fast: 1ms;
  }
}