/* kit v1.7.0 — generated by sync-kit; edit brands/slms/roles.map.json and re-run build-tokens */
/* SkinLab The Medical Spa — palette tier + role tier.
 *
 * Loads AFTER kit/tokens/roles.css, whose role values are neutral placeholders. Equal
 * specificity: source order is the only thing that makes these win. Same for the
 * .section--dark block below against the kit's.
 *
 * Source: brand-system/skinlab/skinlab brand guide (current).pdf
 * Source: brand-builder/content/brands/slms/design.md
 * Source: brand-builder/lp-building/slms-best-pages/assets/styles.css
 *
 * 3 documented deviation(s) from brand guidance — see brands/ROLE-TIER.md.
 */

:root {
  /* ---- palette — brand-named, the only literal colour values here ---- */
  --slms-cloud-dancer: #f1f0ea;
  --slms-jet-stream: #e9e0d7;
  --slms-lily-white: #e7e5dc;
  --slms-whitecap-gray: #e1d7cb;
  --slms-oatmeal: #cec4b4;
  --slms-frosted-almond: #d1baa2;
  --slms-misty-rose: #c8a89e;
  --slms-mocha-mousse: #a98076;
  --slms-fallen-rock: #80756a;
  --slms-shitake: #7a6856;
  --slms-jet-set: #212322;
  --slms-blush: #f5dddc;
  --slms-blush-deep: #df9b9a;

  /* ---- roles — the shared vocabulary components read ---- */
  --primary: var(--slms-shitake);
  /* primary-hover:
     design.md checklist: 'hover states shift one neutral step deeper, no lift' */
  --primary-hover: color-mix(in srgb, var(--slms-shitake) 70%, var(--slms-jet-set));
  /* secondary:
     operator call 2026-08-22: raw Fallen Rock is 3.94:1 on --bg and slms pages set small text in
     --secondary (seven pieces on stellar-m22 alone). Deepened one step with the same 75% mix
     --status-caution already uses, clearing AA while staying in the Fallen Rock family. */
  --secondary: color-mix(in srgb, var(--slms-fallen-rock) 75%, var(--slms-jet-set));
  --tertiary: var(--slms-frosted-almond);
  --accent: var(--slms-blush);
  --accent-strong: var(--slms-blush-deep);
  --bg: var(--slms-cloud-dancer);
  --bg-2: var(--slms-jet-stream);
  --bg-3: var(--slms-oatmeal);
  --bg-inverse: var(--slms-jet-set);
  --text-c: var(--slms-jet-set);
  --text-muted: var(--slms-shitake);
  --text-inverse: var(--slms-cloud-dancer);
  --border: var(--slms-whitecap-gray);
  --border-strong: var(--slms-frosted-almond);
  /* border-inverse:
     hairline on dark surfaces; the live LP's rgba(64,54,42,0.16) is a light-surface hairline and
     its base colour is not in this brand's palette */
  --border-inverse: color-mix(in srgb, var(--slms-cloud-dancer) 20%, var(--slms-jet-set));
  --status-positive: var(--slms-shitake);
  /* status-caution:
     no status palette documented; Fallen Rock raw is 3.94:1, deepened to clear AA */
  --status-caution: color-mix(in srgb, var(--slms-fallen-rock) 75%, var(--slms-jet-set));
  /* status-critical:
     no status palette documented; derived from the brand's warmest text colour, deepened from
     3.05:1 to clear AA */
  --status-critical: color-mix(in srgb, var(--slms-mocha-mousse) 60%, var(--slms-jet-set));
  --btn-primary: var(--primary);
  --btn-primary-hover: var(--primary-hover);
  --btn-primary-text: var(--text-inverse);
  --btn-secondary-hover: var(--bg-2);
  --btn-secondary-text: var(--primary);
  --btn-outline-border: var(--primary);
  --btn-outline-text: var(--primary);

  /* ---- type, geometry, motion — stated by the brand; anything absent inherits the kit ---- */
  --font-heading: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Google Sans Flex', 'Figtree', Arial, sans-serif;
  --btn-radius: 0;
  --radius: 0;
  --radius-l: 0;
  --container: 1240px;
  --measure: 720px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 280ms;
}

/* Roles whose dark value is not a function of any other role, so kit/tokens/roles.css
 * cannot derive them: a self-referential color-mix() there would be a CSS cycle. */
.section--dark {
  /* status-positive:
     on --bg-inverse the light-context value is below its threshold — .section--dark cannot
     derive this without self-reference (a CSS cycle), so the brand supplies it from its own
     palette. 4.71:1. */
  --status-positive: color-mix(in srgb, var(--slms-shitake) 75%, var(--slms-cloud-dancer));
  /* status-caution:
     as --status-positive: supplied here rather than derived in .section--dark. 4.91:1. */
  --status-caution: color-mix(in srgb, var(--slms-fallen-rock) 80%, var(--slms-cloud-dancer));
  /* status-critical:
     as --status-positive: supplied here rather than derived in .section--dark. 4.88:1. */
  --status-critical: color-mix(in srgb, var(--slms-mocha-mousse) 95%, var(--slms-cloud-dancer));
}