/* kit v1.10.0 — generated by sync-kit; edit brands/slag/roles.map.json and re-run build-tokens */
/* SL Aesthetic Group — 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: brands/slac/roles.map.json
 * Source: brand-builder/content/brands/slac/design.md
 */

:root {
  /* ---- palette — brand-named, the only literal colour values here ---- */
  --sl-cloud-dancer: #f1f0ea;
  --sl-whitecap-gray: #e4dace;
  --sl-almond-milk: #cfcabd;
  --sl-feather-gray: #b5ab9b;
  --sl-ginger-root: #bca58d;
  --sl-shitake: #7a6856;
  --sl-wren: #40362a;
  --sl-jet-set: #212322;
  --sl-sky-gray: #bbc6c7;
  --sl-monument: #717f87;
  --sl-vulcan: #2d3339;
  --sl-terracotta: #8a4a3a;

  /* ---- roles — the shared vocabulary components read ---- */
  --primary: var(--sl-wren);
  /* primary-hover:
     §5.1 hover is `opacity: 0.85`; composited over --bg that is the rendered colour */
  --primary-hover: color-mix(in srgb, var(--sl-wren) 85%, var(--sl-cloud-dancer));
  --secondary: var(--sl-shitake);
  --tertiary: var(--sl-feather-gray);
  --accent: var(--sl-ginger-root);
  --accent-strong: var(--sl-shitake);
  --bg: var(--sl-cloud-dancer);
  --bg-2: var(--sl-whitecap-gray);
  --bg-3: var(--sl-almond-milk);
  --bg-inverse: var(--sl-wren);
  --text-c: var(--sl-jet-set);
  --text-muted: var(--sl-shitake);
  --text-inverse: var(--sl-cloud-dancer);
  /* border:
     §2.3 --border-hairline rgba(181,171,155,0.4) composited — roles must be real colour values */
  --border: color-mix(in srgb, var(--sl-feather-gray) 40%, var(--sl-cloud-dancer));
  --border-strong: var(--sl-feather-gray);
  /* border-inverse:
     §2.3 --border-inverse rgba(241,240,234,0.2) composited over --bg-inverse */
  --border-inverse: color-mix(in srgb, var(--sl-cloud-dancer) 20%, var(--sl-wren));
  --status-positive: var(--sl-shitake);
  --status-caution: var(--sl-ginger-root);
  --status-critical: var(--sl-terracotta);
  --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, 'Times New Roman', serif;
  --font-body: 'Google Sans Flex', 'Figtree', Arial, sans-serif;
  --btn-radius: 0;
  --btn-pad-block: 15px;
  --btn-pad-inline: 28px;
  --btn-weight: 500;
  --btn-tracking: 0.08em;
  --radius: 0;
  --radius-l: 0;
  --container: 1280px;
  --measure: 620px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 400ms;
  --dur-fast: 150ms;
}

/* 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.5:1. */
  --status-positive: color-mix(in srgb, var(--sl-shitake) 60%, var(--sl-cloud-dancer));
  /* status-critical:
     as --status-positive: supplied here rather than derived in .section--dark. 4.74:1. */
  --status-critical: color-mix(in srgb, var(--sl-terracotta) 50%, var(--sl-cloud-dancer));
}