/* BS.UI.DesignTokens – Semantic Token Layer (maps generated base tokens to simplified roles)
  Components should consume these variables. All mappings use generated base --bs-* tokens from bs.tokens.generated.css. */

/* Light (default) */
:root {
  /* Text */
  --bs-sem-text-default: var(--bs-text-primary-default);
  --bs-sem-text-muted: var(--bs-text-tertiary-default);
  --bs-sem-text-inverse: var(--bs-text-white-default);
  /* Alias used by some shims */
  --bs-sem-text: var(--bs-sem-text-default);

  /* Surfaces */
  --bs-sem-surface-base: var(--bs-surface-primary-default);
  --bs-sem-surface-subtle: var(--bs-surface-secondary-default);
  --bs-sem-surface-elevated: var(--bs-surface-tertiary-default);
  --bs-sem-surface-muted: var(--bs-surface-tertiary-default);
  --bs-sem-surface-inset: var(--bs-surface-quaternary-default);
  --bs-sem-surface-overlay: rgba(15, 23, 42, 0.55);

  /* Borders */
  --bs-sem-border-default: var(--bs-border-primary-default);
  --bs-sem-border-strong: var(--bs-border-secondary-default);
  --bs-sem-border-subtle: var(--bs-border-tertiary-default);

  /* Focus (color value, not shadow) */
  --bs-sem-focus-ring: var(--bs-action-primary-bg-default);

  /* Actions (Primary) */
  --bs-sem-action-primary-bg: var(--bs-action-primary-bg-default);
  --bs-sem-action-primary-bg-hover: color-mix(
    in srgb,
    var(--bs-action-primary-bg-default) 88%,
    black 12%
  );
  --bs-sem-action-primary-bg-active: color-mix(
    in srgb,
    var(--bs-action-primary-bg-default) 80%,
    black 20%
  );
  --bs-sem-action-primary-text: var(--bs-text-white-default);
  --bs-sem-action-primary-border: var(--bs-action-primary-bg-default);

  /* Actions (Secondary) */
  --bs-sem-action-secondary-bg: var(--bs-sem-surface-subtle);
  --bs-sem-action-secondary-bg-hover: var(--bs-sem-surface-muted);
  --bs-sem-action-secondary-bg-active: var(--bs-sem-surface-inset);
  --bs-sem-action-secondary-text: var(--bs-sem-text-default);
  --bs-sem-action-secondary-border: var(--bs-sem-border-subtle);

  /* Actions (Tertiary) - text only */
  --bs-sem-action-tertiary-text: var(--bs-text-tertiary-default);
  --bs-sem-action-tertiary-text-hover: var(--bs-text-primary-default);
  --bs-sem-action-tertiary-bg-hover: var(--bs-sem-surface-subtle);

  /* Actions (Ghost) */
  --bs-sem-action-ghost-text: var(--bs-text-brand-secondary-default);
  --bs-sem-action-ghost-text-hover: var(--bs-text-brand-tertiary-default);
  --bs-sem-action-ghost-bg-hover: var(--bs-surface-brand-secondary-default);

  /* Actions (Destructive) */
  --bs-sem-action-destructive-bg: var(--bs-sem-status-error-bg);
  --bs-sem-action-destructive-bg-hover: color-mix(
    in srgb,
    var(--bs-sem-status-error-bg) 88%,
    black 12%
  );
  --bs-sem-action-destructive-bg-active: color-mix(
    in srgb,
    var(--bs-sem-status-error-bg) 80%,
    black 20%
  );
  --bs-sem-action-destructive-text: var(--bs-sem-status-error-text);
  --bs-sem-action-destructive-border: var(--bs-sem-status-error-bg);

  /* Status (map basic roles) */
  --bs-sem-status-success-bg: var(--bs-surface-success-secondary-default);
  --bs-sem-status-success-text: var(--bs-text-success-primary-default);
  --bs-sem-status-error-bg: var(
    --bs-surface-brand-solid-default
  ); /* fallback to brand solid for error if dedicated not present */
  --bs-sem-status-error-text: var(--bs-text-white-default);
  --bs-sem-status-warning-bg: var(--bs-surface-quaternary-default);
  --bs-sem-status-warning-text: var(--bs-text-primary-default);
  --bs-sem-status-info-bg: var(--bs-surface-secondary-default);
  --bs-sem-status-info-text: var(--bs-text-primary-default);

  /* Typography (semantic aliases) */
  --bs-sem-typo-family-body: var(--bs-typo-family-body);
  --bs-sem-typo-family-display: var(--bs-typo-family-display);

  /* Body text */
  --bs-sem-typo-body-sm-size: var(--bs-typo-size-text-sm);
  --bs-sem-typo-body-sm-line-height: var(--bs-typo-line-height-text-sm);
  --bs-sem-typo-body-sm-weight: var(--bs-typo-weight-regular);

  --bs-sem-typo-body-md-size: var(--bs-typo-size-text-md);
  --bs-sem-typo-body-md-line-height: var(--bs-typo-line-height-text-md);
  --bs-sem-typo-body-md-weight: var(--bs-typo-weight-regular);

  --bs-sem-typo-body-lg-size: var(--bs-typo-size-text-lg);
  --bs-sem-typo-body-lg-line-height: var(--bs-typo-line-height-text-lg);
  --bs-sem-typo-body-lg-weight: var(--bs-typo-weight-regular);

  /* Display/Headings */
  --bs-sem-typo-display-xs-size: var(--bs-typo-size-display-xs);
  --bs-sem-typo-display-xs-line-height: var(--bs-typo-line-height-display-xs);
  --bs-sem-typo-display-xs-weight: var(--bs-typo-weight-semibold);

  --bs-sem-typo-display-sm-size: var(--bs-typo-size-display-sm);
  --bs-sem-typo-display-sm-line-height: var(--bs-typo-line-height-display-sm);
  --bs-sem-typo-display-sm-weight: var(--bs-typo-weight-semibold);

  --bs-sem-typo-display-md-size: var(--bs-typo-size-display-md);
  --bs-sem-typo-display-md-line-height: var(--bs-typo-line-height-display-md);
  --bs-sem-typo-display-md-weight: var(--bs-typo-weight-semibold);

  --bs-sem-typo-display-lg-size: var(--bs-typo-size-display-lg);
  --bs-sem-typo-display-lg-line-height: var(--bs-typo-line-height-display-lg);
  --bs-sem-typo-display-lg-weight: var(--bs-typo-weight-semibold);

  --bs-sem-typo-display-xl-size: var(--bs-typo-size-display-xl);
  --bs-sem-typo-display-xl-line-height: var(--bs-typo-line-height-display-xl);
  --bs-sem-typo-display-xl-weight: var(--bs-typo-weight-semibold);

  --bs-sem-typo-display-2xl-size: var(--bs-typo-size-display-2xl);
  --bs-sem-typo-display-2xl-line-height: var(--bs-typo-line-height-display-2xl);
  --bs-sem-typo-display-2xl-weight: var(--bs-typo-weight-semibold);
}

/* Dark – currently mirrors light mappings. Override here once dark token set is generated. */
[data-theme="dark"] {
  --bs-sem-text-default: var(--bs-text-primary-default);
  --bs-sem-text-muted: var(--bs-text-tertiary-default);
  --bs-sem-text-inverse: var(--bs-text-white-default);

  --bs-sem-surface-base: var(--bs-surface-primary-default);
  --bs-sem-surface-subtle: var(--bs-surface-secondary-default);
  --bs-sem-surface-elevated: var(--bs-surface-tertiary-default);
  --bs-sem-surface-muted: var(--bs-surface-tertiary-default);
  --bs-sem-surface-inset: var(--bs-surface-quaternary-default);
  --bs-sem-surface-overlay: rgba(0, 0, 0, 0.55);

  --bs-sem-border-default: var(--bs-border-primary-default);
  --bs-sem-border-strong: var(--bs-border-secondary-default);
  --bs-sem-border-subtle: var(--bs-border-tertiary-default);

  --bs-sem-focus-ring: var(--bs-action-primary-bg-default);

  --bs-sem-action-primary-bg: var(--bs-action-primary-bg-default);
  --bs-sem-action-primary-bg-hover: color-mix(
    in srgb,
    var(--bs-action-primary-bg-default) 88%,
    black 12%
  );
  --bs-sem-action-primary-bg-active: color-mix(
    in srgb,
    var(--bs-action-primary-bg-default) 80%,
    black 20%
  );
  --bs-sem-action-primary-text: var(--bs-text-white-default);
  --bs-sem-action-primary-border: var(--bs-action-primary-bg-default);

  --bs-sem-action-secondary-bg: var(--bs-sem-surface-subtle);
  --bs-sem-action-secondary-bg-hover: var(--bs-sem-surface-muted);
  --bs-sem-action-secondary-bg-active: var(--bs-sem-surface-inset);
  --bs-sem-action-secondary-text: var(--bs-sem-text-default);
  --bs-sem-action-secondary-border: var(--bs-sem-border-subtle);

  --bs-sem-action-tertiary-text: var(--bs-text-tertiary-default);
  --bs-sem-action-tertiary-text-hover: var(--bs-text-primary-default);
  --bs-sem-action-tertiary-bg-hover: var(--bs-sem-surface-subtle);

  --bs-sem-action-ghost-text: var(--bs-text-brand-secondary-default);
  --bs-sem-action-ghost-text-hover: var(--bs-text-brand-tertiary-default);
  --bs-sem-action-ghost-bg-hover: var(--bs-surface-brand-secondary-default);

  --bs-sem-action-destructive-bg: var(--bs-sem-status-error-bg);
  --bs-sem-action-destructive-bg-hover: color-mix(
    in srgb,
    var(--bs-sem-status-error-bg) 88%,
    black 12%
  );
  --bs-sem-action-destructive-bg-active: color-mix(
    in srgb,
    var(--bs-sem-status-error-bg) 80%,
    black 20%
  );
  --bs-sem-action-destructive-text: var(--bs-sem-status-error-text);
  --bs-sem-action-destructive-border: var(--bs-sem-status-error-bg);

  /* Typography (dark theme can differ if needed) */
  --bs-sem-typo-family-body: var(--bs-typo-family-body);
  --bs-sem-typo-family-display: var(--bs-typo-family-display);
  --bs-sem-typo-body-sm-size: var(--bs-typo-size-text-sm);
  --bs-sem-typo-body-sm-line-height: var(--bs-typo-line-height-text-sm);
  --bs-sem-typo-body-sm-weight: var(--bs-typo-weight-regular);
  --bs-sem-typo-body-md-size: var(--bs-typo-size-text-md);
  --bs-sem-typo-body-md-line-height: var(--bs-typo-line-height-text-md);
  --bs-sem-typo-body-md-weight: var(--bs-typo-weight-regular);
  --bs-sem-typo-body-lg-size: var(--bs-typo-size-text-lg);
  --bs-sem-typo-body-lg-line-height: var(--bs-typo-line-height-text-lg);
  --bs-sem-typo-body-lg-weight: var(--bs-typo-weight-regular);
  --bs-sem-typo-display-xs-size: var(--bs-typo-size-display-xs);
  --bs-sem-typo-display-xs-line-height: var(--bs-typo-line-height-display-xs);
  --bs-sem-typo-display-xs-weight: var(--bs-typo-weight-semibold);
  --bs-sem-typo-display-sm-size: var(--bs-typo-size-display-sm);
  --bs-sem-typo-display-sm-line-height: var(--bs-typo-line-height-display-sm);
  --bs-sem-typo-display-sm-weight: var(--bs-typo-weight-semibold);
  --bs-sem-typo-display-md-size: var(--bs-typo-size-display-md);
  --bs-sem-typo-display-md-line-height: var(--bs-typo-line-height-display-md);
  --bs-sem-typo-display-md-weight: var(--bs-typo-weight-semibold);
  --bs-sem-typo-display-lg-size: var(--bs-typo-size-display-lg);
  --bs-sem-typo-display-lg-line-height: var(--bs-typo-line-height-display-lg);
  --bs-sem-typo-display-lg-weight: var(--bs-typo-weight-semibold);
  --bs-sem-typo-display-xl-size: var(--bs-typo-size-display-xl);
  --bs-sem-typo-display-xl-line-height: var(--bs-typo-line-height-display-xl);
  --bs-sem-typo-display-xl-weight: var(--bs-typo-weight-semibold);
  --bs-sem-typo-display-2xl-size: var(--bs-typo-size-display-2xl);
  --bs-sem-typo-display-2xl-line-height: var(--bs-typo-line-height-display-2xl);
  --bs-sem-typo-display-2xl-weight: var(--bs-typo-weight-semibold);
}

/* Utilities (optional) */
.bs-sem-surface {
  background: var(--bs-sem-surface-base);
  color: var(--bs-sem-text-default);
}
.bs-sem-surface--elevated {
  background: var(--bs-sem-surface-elevated);
}
.bs-sem-text-muted {
  color: var(--bs-sem-text-muted);
}