:root {
  --customer-color-primary: var(--color-primary);
  --customer-color-accent: var(--color-accent);
  --customer-color-background: var(--color-background);
  --customer-color-surface: var(--color-surface);
  --customer-color-text: var(--color-primary);
  --customer-color-muted: var(--color-muted);
  --customer-border-default: var(--color-border);
  --customer-border-focus: var(--color-accent);
  --customer-color-success: #18794e;
  --customer-color-warning: #9a6700;
  --customer-color-danger: #b42318;
  --customer-color-info: #175cd3;
  --customer-color-on-primary: var(--customer-color-surface);
  --customer-color-accent-text: color-mix(in srgb, var(--customer-color-accent) 65%, var(--customer-color-text));
  --customer-surface-subtle: color-mix(in srgb, var(--customer-color-muted) 8%, var(--customer-color-surface));
  --customer-surface-interactive: color-mix(in srgb, var(--customer-color-primary) 8%, var(--customer-color-surface));
  --customer-surface-accent: color-mix(in srgb, var(--customer-color-accent) 12%, var(--customer-color-surface));
  --customer-surface-info: color-mix(in srgb, var(--customer-color-info) 9%, var(--customer-color-surface));
  --customer-surface-success: color-mix(in srgb, var(--customer-color-success) 9%, var(--customer-color-surface));
  --customer-surface-warning: color-mix(in srgb, var(--customer-color-warning) 5%, var(--customer-color-surface));
  --customer-surface-danger: color-mix(in srgb, var(--customer-color-danger) 9%, var(--customer-color-surface));
  --customer-border-success: color-mix(in srgb, var(--customer-color-success) 45%, var(--customer-border-default));
  --customer-border-warning: color-mix(in srgb, var(--customer-color-warning) 45%, var(--customer-border-default));
  --customer-border-danger: color-mix(in srgb, var(--customer-color-danger) 45%, var(--customer-border-default));
  --customer-border-control: color-mix(in srgb, var(--customer-color-muted) 65%, var(--customer-border-default));
  --customer-focus-ring: color-mix(in srgb, var(--customer-border-focus) 24%, transparent);
  --customer-page-decoration: color-mix(in srgb, var(--customer-color-primary) 9%, transparent);
  --customer-shadow-surface: 0 24px 60px color-mix(in srgb, var(--customer-color-text) 18%, transparent);
  --customer-modal-backdrop: color-mix(in srgb, var(--customer-color-text) 58%, transparent);
  --customer-radius-control: 8px;
  --customer-radius-surface: 16px;
}

body[data-customer-surface] {
  /*
   * Portal Core still consumes the established visual-system token names.
   * Rebind those names at the customer surface boundary so a Distribution can
   * replace presentation without leaking into Admin or duplicating page CSS.
   */
  --sterling-bg-page: var(--customer-color-background);
  --sterling-bg-surface: var(--customer-color-surface);
  --sterling-bg-card: var(--customer-color-surface);
  --sterling-bg-elevated: var(--customer-color-surface);
  --sterling-bg-deep: var(--customer-color-surface);
  --sterling-light-section: var(--customer-color-background);
  --sterling-text-primary: var(--customer-color-text);
  --sterling-text-secondary: var(--customer-color-muted);
  --sterling-text-muted: var(--customer-color-muted);
  --sterling-gold: var(--customer-color-accent);
  --sterling-gold-soft: var(--customer-color-primary);
  --sterling-gold-strong: var(--customer-color-primary);
  --sterling-border: var(--customer-border-default);
  --sterling-border-strong: var(--customer-border-default);
  --sterling-teal: var(--customer-color-primary);
  --sterling-teal-bright: var(--customer-color-primary);
  color: var(--customer-color-text);
  background-color: var(--customer-color-background);
}

body[data-customer-surface] .site-header,
body[data-customer-surface] .portal-panel,
body[data-customer-surface] .portal-auth-card {
  background-color: var(--customer-color-surface);
}

body[data-customer-surface] .portal-auth-button,
body[data-customer-surface] .portal-button,
body[data-customer-surface] .portal-primary-action,
body[data-customer-surface] .portal-action-link,
body[data-customer-surface] .portal-table-action-button {
  border-color: var(--customer-color-primary);
  background: var(--customer-color-primary);
  color: var(--customer-color-on-primary);
}

body[data-customer-surface] .portal-status.success,
body[data-customer-surface] .status-resolved,
body[data-customer-surface] .status-closed,
body[data-customer-surface] .status-completed {
  border-color: var(--customer-color-success);
  color: var(--customer-color-success);
}

body[data-customer-surface] .portal-status.error,
body[data-customer-surface] .priority-critical,
body[data-customer-surface] .priority-urgent,
body[data-customer-surface] .danger,
body[data-customer-surface] .portal-form-error,
body[data-customer-surface] .portal-modal-error,
body[data-customer-surface] .portal-button.danger,
body[data-customer-surface] .portal-action-link.danger,
body[data-customer-surface] .portal-table-action-button--danger {
  border-color: var(--customer-color-danger);
  background: color-mix(in srgb, var(--customer-color-danger) 8%, var(--customer-color-surface));
  color: var(--customer-color-danger);
}

body[data-customer-surface] .portal-pill.priority-normal {
  border-color: var(--customer-border-control);
  background: var(--customer-surface-subtle);
  color: var(--customer-color-text);
}

body[data-customer-surface] :focus-visible {
  outline-color: var(--customer-border-focus);
}