/* Vendored from niruttitime/internal.nuancelab.co @ v2.1.1 (ecd0722) on 2026-08-15.
   Do not edit directly — run `node scripts/sync-tokens.mjs`.
   See docs/design-tokens.md for the pinned version and upgrade process. */

/*
 * Nuance design guide — CSS recipes
 *
 * These are structural patterns, not tokens. Each recipe depends on the
 * custom properties defined in `tokens.css` (e.g. --tile-radius,
 * --tile-inset) and is meaningless without them — @import tokens.css
 * alongside this file, or consume both from the design guide package.
 *
 * Source: design-guide/docs/graphics.md, "The tile" > "The recipe".
 */

/* The tile: brand container shape with one fixed diagonal pair of
   corners cut to a large quarter (top-left, bottom-right). */
.tile-box { container-type: inline-size; }        /* the wrapper sizes the shape */
.tile {
  width: 100%;
  border-radius: var(--tile-radius) 0 var(--tile-radius) 0;
  padding: var(--tile-inset);
}

/* Eyebrow: opens a section beside a heading. Colour is not part of the type
   contract (typography.md specifies face/size/tracking/case only), so it is
   a deliberate two-way choice: Purple by default for a primary section
   opener, Muted for a lower-emphasis one (nested sections, repeated openers
   down a long page). Source: design-guide/docs/typography.md, "Typography
   contract" > Eyebrow. */
.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--purple);
  font: 500 var(--font-size-label)/1.4 "DM Mono", monospace;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.eyebrow-muted { color: var(--muted); }