/**
 * Shared, low-specificity article surface primitives.
 *
 * Feature CSS files keep owning layout and interaction. This layer only exposes
 * convergent tokens/classes so static SemanticNavigation boxes and interactive
 * ColorArticleBox instances can migrate without coupling to each other.
 */
.td-article-surface {
  --td-article-surface-accent: #d94e46;
  --td-article-surface-accent-rgb: 217, 78, 70;
  --td-article-surface-bg: rgba(255, 255, 255, 0.94);
  --td-article-surface-border: rgba(17, 24, 39, 0.1);
  --td-article-surface-radius: 24px;
  --td-article-surface-shadow: 0 22px 55px rgba(17, 24, 39, 0.1);
  --td-article-surface-card-radius: 18px;
  --td-article-surface-card-border: rgba(17, 24, 39, 0.08);
  --td-article-surface-muted: #667085;
  --td-article-surface-space-xs: 0.25rem;
  --td-article-surface-space-sm: 0.5rem;
  --td-article-surface-space-md: 0.75rem;
  --td-article-surface-space-lg: 1rem;
  --td-article-surface-grid-gap: 0.75rem;
  --td-article-surface-title-line-height: 1.2;
  --td-article-surface-copy-line-height: 1.45;
  --td-article-surface-focus-outline: 3px solid currentColor;
  --td-article-surface-focus-outline-offset: 3px;
  --td-article-surface-transition-fast: 160ms ease;
  --td-article-surface-card-shadow: 0 10px 26px rgba(17, 24, 39, 0.055);
  --td-article-surface-card-shadow-hover: 0 18px 36px rgba(17, 24, 39, 0.11);
  --td-article-surface-control-bg: rgba(0, 0, 0, 0.03);
  --td-article-surface-control-bg-hover: rgba(0, 0, 0, 0.06);
  --td-article-surface-control-radius: 20px;
  --td-article-surface-menu-surface: #ffffff;
  --td-article-surface-menu-item-bg: #ffffff;
  --td-article-surface-menu-item-border: rgba(0, 0, 0, 0.06);
}

.td-article-surface-card {
  --td-article-surface-card-accent: var(--td-article-surface-accent);
}

.td-article-surface-group {
  --td-article-surface-group-accent: var(--td-article-surface-accent);
}

.td-article-surface--interactive {
  --td-article-surface-interaction-z-index: 2;
}

.td-article-surface--static {
  --td-article-surface-interaction-z-index: 0;
}

.td-article-surface__title,
.td-article-surface-card__title,
.td-article-surface-group__title {
  --td-article-surface-title-color: inherit;
}

.td-article-surface__intro,
.td-article-surface__note,
.td-article-surface-card__reason,
.td-article-surface-card__evidence,
.td-article-surface-card__meta,
.td-article-surface-group__description,
.td-article-surface-group__count {
  --td-article-surface-muted-color: var(--td-article-surface-muted);
}

.td-article-surface-card__media,
.td-article-surface-card__content,
.td-article-surface-group__grid,
.td-article-surface-group__header {
  --td-article-surface-slot-radius: var(--td-article-surface-card-radius);
}

.td-article-surface-card__badge,
.td-article-surface-card__cta,
.td-article-surface-group__icon {
  --td-article-surface-slot-accent: var(--td-article-surface-accent);
}

.td-article-surface__inner,
.td-article-surface__body,
.td-article-surface__grid-container {
  --td-article-surface-shell-radius: var(--td-article-surface-radius);
}

.td-article-surface__header-main,
.td-article-surface__title-wrapper,
.td-article-surface__tabs-nav {
  --td-article-surface-chrome-gap: 12px;
}

.td-article-surface__accent-swatch,
.td-article-surface__collapse-chevron,
.td-article-surface__loader-overlay {
  --td-article-surface-chrome-accent: var(--td-article-surface-accent);
  --td-article-surface-chrome-z-index: var(--td-article-surface-interaction-z-index);
}