/* CEMIUX.DESIGN-SYSTEM.2 · Semantic Token Value Layer
 * Concrete design values are expressed only as CSS custom-property primitives.
 * No domain selector, no per-surface override and no workflow semantics live here.
 */
:root {
  /* Typography values */
  --cemi-ds-type-page-title-size: var(--cemi-type-h1-size);
  --cemi-ds-type-page-title-line: var(--cemi-type-h1-line);
  --cemi-ds-type-page-title-weight: var(--cemi-weight-extrabold);
  --cemi-ds-type-page-title-track: var(--cemi-type-h1-track);
  --cemi-ds-type-page-title-after: var(--cemi-space-6);

  --cemi-ds-type-section-title-size: var(--cemi-type-h2-size);
  --cemi-ds-type-section-title-line: var(--cemi-type-h2-line);
  --cemi-ds-type-section-title-weight: var(--cemi-weight-extrabold);
  --cemi-ds-type-section-title-track: var(--cemi-type-h2-track);
  --cemi-ds-type-section-title-after: var(--cemi-space-5);

  --cemi-ds-type-step-title-size: var(--cemi-type-h3-size);
  --cemi-ds-type-step-title-line: var(--cemi-type-h3-line);
  --cemi-ds-type-step-title-weight: var(--cemi-weight-bold);
  --cemi-ds-type-step-title-track: var(--cemi-type-h3-track);
  --cemi-ds-type-step-title-after: var(--cemi-space-3);

  --cemi-ds-type-body-size: var(--cemi-type-body-size);
  --cemi-ds-type-body-line: 1.55;
  --cemi-ds-type-body-weight: var(--cemi-weight-regular);
  --cemi-ds-type-body-color: var(--cemi-color-text);

  --cemi-ds-type-support-size: var(--cemi-type-body-sm-size);
  --cemi-ds-type-support-line: 1.5;
  --cemi-ds-type-support-weight: var(--cemi-weight-regular);
  --cemi-ds-type-support-color: var(--cemi-color-muted);

  --cemi-ds-type-instruction-size: var(--cemi-type-body-lg-size);
  --cemi-ds-type-instruction-line: 1.58;
  --cemi-ds-type-instruction-weight: var(--cemi-weight-medium);
  --cemi-ds-type-instruction-color: var(--cemi-color-text);

  --cemi-ds-type-metadata-size: var(--cemi-type-label-size);
  --cemi-ds-type-metadata-line: 1.2;
  --cemi-ds-type-metadata-weight: var(--cemi-weight-bold);
  --cemi-ds-type-metadata-track: var(--cemi-type-label-track);
  --cemi-ds-type-metadata-color: var(--cemi-color-muted);

  /* Shared spacing primitives */
  --cemi-ds-surface-padding-sm: var(--cemi-space-3);
  --cemi-ds-surface-padding-md: var(--cemi-space-4);
  --cemi-ds-surface-padding-lg: var(--cemi-space-6);
  --cemi-ds-surface-gap-sm: var(--cemi-space-2);
  --cemi-ds-surface-gap-md: var(--cemi-space-4);
  --cemi-ds-surface-gap-lg: var(--cemi-space-6);

  /* Query field */
  --cemi-ds-field-query-bg: var(--cemi-color-surface);
  --cemi-ds-field-query-border: 1px solid var(--cemi-color-border-strong);
  --cemi-ds-field-query-radius: var(--cemi-radius-md);
  --cemi-ds-field-query-padding: var(--cemi-space-4);
  --cemi-ds-field-query-gap: var(--cemi-space-2);

  /* Surface primitives */
  --cemi-ds-surface-result-bg: var(--cemi-color-surface);
  --cemi-ds-surface-result-text: var(--cemi-color-text);
  --cemi-ds-surface-result-border: 1px solid var(--cemi-color-border);
  --cemi-ds-surface-result-radius: var(--cemi-radius-lg);
  --cemi-ds-surface-result-padding: var(--cemi-ds-surface-padding-lg);
  --cemi-ds-surface-result-gap: var(--cemi-ds-surface-gap-md);
  --cemi-ds-surface-result-shadow: var(--cemi-shadow-sm);

  --cemi-ds-surface-summary-bg: var(--cemi-color-surface-soft);
  --cemi-ds-surface-summary-text: var(--cemi-color-text);
  --cemi-ds-surface-summary-border: 1px solid var(--cemi-color-border);
  --cemi-ds-surface-summary-radius: var(--cemi-radius-md);
  --cemi-ds-surface-summary-padding: var(--cemi-ds-surface-padding-md);
  --cemi-ds-surface-summary-gap: var(--cemi-ds-surface-gap-sm);
  --cemi-ds-surface-summary-shadow: none;

  --cemi-ds-surface-status-bg: var(--cemi-color-brand-soft);
  --cemi-ds-surface-status-text: var(--cemi-color-brand-strong);
  --cemi-ds-surface-status-border: 1px solid color-mix(in srgb, var(--cemi-color-brand) 24%, var(--cemi-color-border));
  --cemi-ds-surface-status-radius: var(--cemi-radius-pill);
  --cemi-ds-surface-status-padding: var(--cemi-space-2) var(--cemi-space-3);
  --cemi-ds-surface-status-gap: var(--cemi-space-1);
  --cemi-ds-surface-status-shadow: none;

  --cemi-ds-surface-condition-bg: var(--cemi-color-surface-soft);
  --cemi-ds-surface-condition-text: var(--cemi-color-text);
  --cemi-ds-surface-condition-border: 1px solid var(--cemi-color-border-strong);
  --cemi-ds-surface-condition-radius: var(--cemi-radius-md);
  --cemi-ds-surface-condition-padding: var(--cemi-ds-surface-padding-md);
  --cemi-ds-surface-condition-gap: var(--cemi-ds-surface-gap-sm);
  --cemi-ds-surface-condition-shadow: none;

  --cemi-ds-surface-gate-bg: var(--cemi-color-surface);
  --cemi-ds-surface-gate-text: var(--cemi-color-ink);
  --cemi-ds-surface-gate-border: 1px solid var(--cemi-color-border-strong);
  --cemi-ds-surface-gate-radius: var(--cemi-radius-lg);
  --cemi-ds-surface-gate-padding: var(--cemi-ds-surface-padding-lg);
  --cemi-ds-surface-gate-gap: var(--cemi-ds-surface-gap-md);
  --cemi-ds-surface-gate-shadow: var(--cemi-shadow-sm);

  --cemi-ds-surface-warning-bg: color-mix(in srgb, var(--cemi-color-warning) 8%, var(--cemi-color-surface));
  --cemi-ds-surface-warning-text: var(--cemi-color-text);
  --cemi-ds-surface-warning-border: 1px solid color-mix(in srgb, var(--cemi-color-warning) 36%, var(--cemi-color-border));
  --cemi-ds-surface-warning-radius: var(--cemi-radius-md);
  --cemi-ds-surface-warning-padding: var(--cemi-ds-surface-padding-md);
  --cemi-ds-surface-warning-gap: var(--cemi-ds-surface-gap-sm);
  --cemi-ds-surface-warning-shadow: none;

  --cemi-ds-surface-error-bg: color-mix(in srgb, var(--cemi-color-danger) 8%, var(--cemi-color-surface));
  --cemi-ds-surface-error-text: var(--cemi-color-text);
  --cemi-ds-surface-error-border: 1px solid color-mix(in srgb, var(--cemi-color-danger) 36%, var(--cemi-color-border));
  --cemi-ds-surface-error-radius: var(--cemi-radius-md);
  --cemi-ds-surface-error-padding: var(--cemi-ds-surface-padding-md);
  --cemi-ds-surface-error-gap: var(--cemi-ds-surface-gap-sm);
  --cemi-ds-surface-error-shadow: none;

  --cemi-ds-surface-media-bg: var(--cemi-color-surface-strong);
  --cemi-ds-surface-media-text: var(--cemi-color-text);
  --cemi-ds-surface-media-border: 0 solid transparent;
  --cemi-ds-surface-media-radius: var(--cemi-radius-xl);
  --cemi-ds-surface-media-padding: 0;
  --cemi-ds-surface-media-gap: 0;
  --cemi-ds-surface-media-shadow: none;

  --cemi-ds-surface-overlay-bg: rgba(13,18,27,.55);
  --cemi-ds-surface-overlay-text: #fff;
  --cemi-ds-surface-overlay-border: 0 solid transparent;
  --cemi-ds-surface-overlay-radius: 0;
  --cemi-ds-surface-overlay-padding: var(--cemi-space-4);
  --cemi-ds-surface-overlay-gap: var(--cemi-space-2);
  --cemi-ds-surface-overlay-shadow: none;

  /* Action primitives */
  --cemi-ds-action-min-height: 44px;
  --cemi-ds-action-padding: .72rem 1rem;
  --cemi-ds-action-radius: var(--cemi-radius-pill);
  --cemi-ds-action-weight: var(--cemi-weight-bold);

  --cemi-ds-action-primary-bg: var(--cemi-color-brand);
  --cemi-ds-action-primary-text: #fff;
  --cemi-ds-action-primary-border: 1px solid transparent;
  --cemi-ds-action-primary-radius: var(--cemi-ds-action-radius);
  --cemi-ds-action-primary-padding: var(--cemi-ds-action-padding);
  --cemi-ds-action-primary-min-height: var(--cemi-ds-action-min-height);
  --cemi-ds-action-primary-weight: var(--cemi-ds-action-weight);

  --cemi-ds-action-secondary-bg: var(--cemi-color-surface);
  --cemi-ds-action-secondary-text: var(--cemi-color-ink);
  --cemi-ds-action-secondary-border: 1px solid var(--cemi-color-border);
  --cemi-ds-action-secondary-radius: var(--cemi-ds-action-radius);
  --cemi-ds-action-secondary-padding: var(--cemi-ds-action-padding);
  --cemi-ds-action-secondary-min-height: var(--cemi-ds-action-min-height);
  --cemi-ds-action-secondary-weight: var(--cemi-ds-action-weight);

  --cemi-ds-action-navigation-bg: transparent;
  --cemi-ds-action-navigation-text: var(--cemi-color-ink);
  --cemi-ds-action-navigation-border: 1px solid transparent;
  --cemi-ds-action-navigation-radius: var(--cemi-ds-action-radius);
  --cemi-ds-action-navigation-padding: var(--cemi-ds-action-padding);
  --cemi-ds-action-navigation-min-height: var(--cemi-ds-action-min-height);
  --cemi-ds-action-navigation-weight: var(--cemi-weight-semibold);

  --cemi-ds-action-destructive-bg: var(--cemi-color-danger);
  --cemi-ds-action-destructive-text: #fff;
  --cemi-ds-action-destructive-border: 1px solid transparent;
  --cemi-ds-action-destructive-radius: var(--cemi-ds-action-radius);
  --cemi-ds-action-destructive-padding: var(--cemi-ds-action-padding);
  --cemi-ds-action-destructive-min-height: var(--cemi-ds-action-min-height);
  --cemi-ds-action-destructive-weight: var(--cemi-ds-action-weight);

  --cemi-ds-action-external-authority-bg: var(--cemi-color-ink);
  --cemi-ds-action-external-authority-text: #fff;
  --cemi-ds-action-external-authority-border: 1px solid transparent;
  --cemi-ds-action-external-authority-radius: var(--cemi-ds-action-radius);
  --cemi-ds-action-external-authority-padding: var(--cemi-ds-action-padding);
  --cemi-ds-action-external-authority-min-height: var(--cemi-ds-action-min-height);
  --cemi-ds-action-external-authority-weight: var(--cemi-ds-action-weight);

  --cemi-ds-action-recovery-bg: var(--cemi-color-surface-soft);
  --cemi-ds-action-recovery-text: var(--cemi-color-ink);
  --cemi-ds-action-recovery-border: 1px solid var(--cemi-color-border-strong);
  --cemi-ds-action-recovery-radius: var(--cemi-ds-action-radius);
  --cemi-ds-action-recovery-padding: var(--cemi-ds-action-padding);
  --cemi-ds-action-recovery-min-height: var(--cemi-ds-action-min-height);
  --cemi-ds-action-recovery-weight: var(--cemi-ds-action-weight);

  /* State modifiers */
  --cemi-ds-state-pending-accent: var(--cemi-color-warning);
  --cemi-ds-state-pending-bg: color-mix(in srgb, var(--cemi-color-warning) 8%, var(--cemi-color-surface));
  --cemi-ds-state-pending-border: color-mix(in srgb, var(--cemi-color-warning) 36%, var(--cemi-color-border));
  --cemi-ds-state-pending-text: var(--cemi-color-text);

  --cemi-ds-state-complete-accent: var(--cemi-color-success);
  --cemi-ds-state-complete-bg: color-mix(in srgb, var(--cemi-color-success) 8%, var(--cemi-color-surface));
  --cemi-ds-state-complete-border: color-mix(in srgb, var(--cemi-color-success) 32%, var(--cemi-color-border));
  --cemi-ds-state-complete-text: var(--cemi-color-text);

  --cemi-ds-state-blocked-accent: var(--cemi-color-danger);
  --cemi-ds-state-blocked-bg: color-mix(in srgb, var(--cemi-color-danger) 8%, var(--cemi-color-surface));
  --cemi-ds-state-blocked-border: color-mix(in srgb, var(--cemi-color-danger) 36%, var(--cemi-color-border));
  --cemi-ds-state-blocked-text: var(--cemi-color-text);

  --cemi-ds-state-stale-accent: var(--cemi-color-muted);
  --cemi-ds-state-stale-bg: var(--cemi-color-surface-soft);
  --cemi-ds-state-stale-border: var(--cemi-color-border-strong);
  --cemi-ds-state-stale-text: var(--cemi-color-muted);

  --cemi-ds-state-review-accent: var(--cemi-color-focus);
  --cemi-ds-state-review-bg: color-mix(in srgb, var(--cemi-color-focus) 7%, var(--cemi-color-surface));
  --cemi-ds-state-review-border: color-mix(in srgb, var(--cemi-color-focus) 28%, var(--cemi-color-border));
  --cemi-ds-state-review-text: var(--cemi-color-text);

  --cemi-ds-state-error-accent: var(--cemi-color-danger);
  --cemi-ds-state-error-bg: color-mix(in srgb, var(--cemi-color-danger) 8%, var(--cemi-color-surface));
  --cemi-ds-state-error-border: color-mix(in srgb, var(--cemi-color-danger) 36%, var(--cemi-color-border));
  --cemi-ds-state-error-text: var(--cemi-color-danger);

  --cemi-ds-state-read-only-accent: var(--cemi-color-muted);
  --cemi-ds-state-read-only-bg: var(--cemi-color-surface-soft);
  --cemi-ds-state-read-only-border: var(--cemi-color-border);
  --cemi-ds-state-read-only-text: var(--cemi-color-muted);

  /* Theme intent modifiers. Full light/dark materialization is deferred. */
  --cemi-ds-theme-neutral-accent: var(--cemi-color-ink);
  --cemi-ds-theme-neutral-bg: var(--cemi-color-surface);
  --cemi-ds-theme-neutral-border: var(--cemi-color-border);
  --cemi-ds-theme-neutral-text: var(--cemi-color-text);

  --cemi-ds-theme-accent-accent: var(--cemi-color-brand);
  --cemi-ds-theme-accent-bg: var(--cemi-color-brand-soft);
  --cemi-ds-theme-accent-border: color-mix(in srgb, var(--cemi-color-brand) 28%, var(--cemi-color-border));
  --cemi-ds-theme-accent-text: var(--cemi-color-brand-strong);

  --cemi-ds-theme-semantic-accent: currentColor;
  --cemi-ds-theme-semantic-bg: inherit;
  --cemi-ds-theme-semantic-border: currentColor;
  --cemi-ds-theme-semantic-text: inherit;

  --cemi-ds-theme-media-accent: var(--cemi-color-surface);
  --cemi-ds-theme-media-bg: var(--cemi-color-ink);
  --cemi-ds-theme-media-border: transparent;
  --cemi-ds-theme-media-text: #fff;

  --cemi-ds-theme-inherited-accent: currentColor;
  --cemi-ds-theme-inherited-bg: inherit;
  --cemi-ds-theme-inherited-border: currentColor;
  --cemi-ds-theme-inherited-text: inherit;
}

@media (max-width: 47.999rem) {
  :root {
    --cemi-ds-surface-padding-lg: var(--cemi-space-5);
    --cemi-ds-surface-gap-lg: var(--cemi-space-5);
    --cemi-ds-type-page-title-after: var(--cemi-space-5);
    --cemi-ds-type-section-title-after: var(--cemi-space-4);
  }
}