/* kit v1.11.0 — generated by sync-kit; edit brands/euph/roles.map.json and re-run build-tokens */
/* Euphie — 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: https://euphie.com.my/ (Elementor global colours + typography, site CSS, captured 2026-11-11)
 * Source: https://euphie.com.my/ (computed styles of the rendered homepage, 2026-11-11)
 *
 * 2 documented deviation(s) from brand guidance — see brands/ROLE-TIER.md.
 */

:root {
  /* ---- palette — brand-named, the only literal colour values here ---- */
  --eu-espresso: #3f2b1b;
  --eu-cocoa: #5d4b3c;
  --eu-graphite: #444444;
  --eu-walnut: #8b7665;
  --eu-terracotta: #c26e60;
  --eu-camel: #d3b59e;
  --eu-oat: #d1c1a8;
  --eu-sand: #e1c4ae;
  --eu-linen: #eee6dd;
  --eu-blush: #f2eae9;
  --eu-cream: #f6f3ee;
  --eu-white: #ffffff;

  /* ---- roles — the shared vocabulary components read ---- */
  --primary: var(--eu-cocoa);
  /* primary-hover:
     no hover state stated by the site; deepened one step into Espresso, the darkest colour in
     its own palette */
  --primary-hover: color-mix(in srgb, var(--eu-cocoa) 70%, var(--eu-espresso));
  /* secondary:
     raw Walnut is below AA on White for small text; deepened toward Espresso, staying in the
     Walnut family */
  --secondary: color-mix(in srgb, var(--eu-walnut) 80%, var(--eu-espresso));
  --tertiary: var(--eu-camel);
  --accent: var(--eu-terracotta);
  /* accent-strong:
     the site sets section headings in Terracotta, which is large-text only on White; the
     deepened step carries smaller text */
  --accent-strong: color-mix(in srgb, var(--eu-terracotta) 75%, var(--eu-espresso));
  --bg: var(--eu-white);
  --bg-2: var(--eu-cream);
  --bg-3: var(--eu-linen);
  --bg-inverse: var(--eu-cocoa);
  --text-c: var(--eu-cocoa);
  /* text-muted:
     as --secondary: the site's muted brown is Walnut, deepened to clear AA on White */
  --text-muted: color-mix(in srgb, var(--eu-walnut) 80%, var(--eu-espresso));
  --text-inverse: var(--eu-cream);
  /* border:
     hairline; the site states none, so a composited Cocoa tint (roles must be real colour
     values) */
  --border: color-mix(in srgb, var(--eu-cocoa) 14%, var(--eu-white));
  --border-strong: var(--eu-oat);
  /* border-inverse:
     hairline on dark surfaces; no value stated */
  --border-inverse: color-mix(in srgb, var(--eu-cream) 22%, var(--eu-cocoa));
  --status-positive: var(--eu-cocoa);
  /* status-caution:
     no status palette on the site; derived from Terracotta, deepened to clear AA */
  --status-caution: color-mix(in srgb, var(--eu-terracotta) 75%, var(--eu-espresso));
  /* status-critical:
     no status palette on the site; the deepest Terracotta step, kept distinct from
     --status-caution */
  --status-critical: color-mix(in srgb, var(--eu-terracotta) 55%, var(--eu-espresso));
  --btn-primary: var(--primary);
  --btn-primary-hover: var(--primary-hover);
  --btn-primary-text: var(--text-inverse);
  --btn-secondary-hover: var(--bg-3);
  --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: 'Lora', Georgia, serif;
  --font-body: 'Montserrat', Arial, sans-serif;
  --btn-radius: 8px;
  --radius: 8px;
  --radius-l: 16px;
}

/* 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 (Cocoa) the light-context value is Cocoa itself, 1:1 — .section--dark cannot
     derive this without self-reference, so the brand supplies it from its own palette. */
  --status-positive: color-mix(in srgb, var(--eu-cocoa) 20%, var(--eu-cream));
  /* status-caution:
     as --status-positive: supplied here rather than derived in .section--dark. */
  --status-caution: color-mix(in srgb, var(--eu-terracotta) 30%, var(--eu-cream));
  /* status-critical:
     as --status-positive: supplied here rather than derived in .section--dark; deeper than
     caution to stay distinct. */
  --status-critical: color-mix(in srgb, var(--eu-terracotta) 42%, var(--eu-cream));
}