/**
 * CEMIUX.DESIGN-SYSTEM.3
 * Generic live materialization primitives.
 *
 * No page-specific selectors. No positional-child rules. No persisted overrides.
 * Runtime JS resolves semantic role -> component/tokens and exposes only
 * ephemeral data-cemi-design-* annotations + --cemi-ds-live-* variables.
 */

[data-cemi-design-materialized="1"] {
  box-sizing: border-box;
}

[data-cemi-design-category="text"] {
  font-family: var(--cemi-ds-live-font-family, inherit);
  font-size: var(--cemi-ds-live-font-size, inherit);
  line-height: var(--cemi-ds-live-line-height, inherit);
  font-weight: var(--cemi-ds-live-font-weight, inherit);
  letter-spacing: var(--cemi-ds-live-letter-spacing, normal);
  color: var(--cemi-ds-live-color, inherit);
  margin-block-end: var(--cemi-ds-live-space-after, 0);
}

[data-cemi-design-category="field"],
[data-cemi-design-category="surface"] {
  background: var(--cemi-ds-live-background, transparent);
  color: var(--cemi-ds-live-text, var(--cemi-ds-live-color, inherit));
  border: var(--cemi-ds-live-border, 0 solid transparent);
  border-radius: var(--cemi-ds-live-radius, 0);
  padding: var(--cemi-ds-live-padding, 0);
  gap: var(--cemi-ds-live-gap, 0);
  box-shadow: var(--cemi-ds-live-shadow, none);
}

[data-cemi-design-category="surface"] {
  display: grid;
}

[data-cemi-design-category="action"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cemi-space-2, .5rem);
  min-height: var(--cemi-ds-live-min-height, 44px);
  padding: var(--cemi-ds-live-padding, .72rem 1rem);
  border: var(--cemi-ds-live-border, 1px solid transparent);
  border-radius: var(--cemi-ds-live-radius, 999px);
  background: var(--cemi-ds-live-background, transparent);
  color: var(--cemi-ds-live-text, inherit);
  font-weight: var(--cemi-ds-live-font-weight, 700);
  text-decoration: none;
  line-height: 1.15;
}

[data-cemi-design-category="action"]:where(button,[role="button"],a) {
  cursor: pointer;
}

[data-cemi-design-category="media"] {
  background: var(--cemi-ds-live-background, transparent);
  color: var(--cemi-ds-live-text, inherit);
  border: var(--cemi-ds-live-border, 0 solid transparent);
  border-radius: var(--cemi-ds-live-radius, 0);
  box-shadow: var(--cemi-ds-live-shadow, none);
  overflow: hidden;
}

[data-cemi-design-category="visual"] {
  background: var(--cemi-ds-live-background, transparent);
  color: var(--cemi-ds-live-text, inherit);
  border: var(--cemi-ds-live-border, 0 solid transparent);
  border-radius: var(--cemi-ds-live-radius, 0);
  padding: var(--cemi-ds-live-padding, 0);
}

/* State values are already merged by the runtime resolver; this accent hook is
   intentionally presentation-only and never changes workflow semantics. */
[data-cemi-design-materialized="1"][data-cemi-state]:not([data-cemi-state="default"]) {
  --cemi-ds-component-accent: var(--cemi-ds-live-accent, currentColor);
}

[data-cemi-design-materialized="1"][data-cemi-state]:not([data-cemi-state="default"]),
[data-cemi-design-materialized="1"][data-cemi-design-theme="accent"],
[data-cemi-design-materialized="1"][data-cemi-design-theme="media"],
[data-cemi-design-materialized="1"][data-cemi-design-theme="neutral"] {
  border-color: var(--cemi-ds-live-border-color, currentColor);
}

[data-cemi-design-category="action"]:focus-visible,
[data-cemi-design-category="field"]:focus-visible,
[data-cemi-design-category="surface"]:focus-within {
  outline: 2px solid var(--cemi-color-focus, currentColor);
  outline-offset: 2px;
}

/* data-cemi-responsive-behavior is materialized by 09-responsive-materialization.css (DESIGN-SYSTEM.4A). */