:root {
  /* Content OS Design System V2.1 - specification only, not connected to pages. */

  /* Foundation: typography */
  --ds21-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ds21-font-weight-regular: 400;
  --ds21-font-weight-medium: 500;
  --ds21-font-weight-semibold: 600;
  --ds21-font-weight-bold: 700;
  --ds21-font-weight-display: 800;

  --ds21-page-title-size: 24px;
  --ds21-page-title-weight: var(--ds21-font-weight-bold);
  --ds21-page-title-line-height: 1.25;
  --ds21-page-subtitle-size: 13px;
  --ds21-page-subtitle-weight: var(--ds21-font-weight-regular);
  --ds21-page-subtitle-line-height: 1.55;
  --ds21-section-title-size: 16px;
  --ds21-section-title-weight: var(--ds21-font-weight-semibold);
  --ds21-section-title-line-height: 1.35;
  --ds21-subsection-title-size: 14px;
  --ds21-subsection-title-weight: var(--ds21-font-weight-semibold);
  --ds21-subsection-title-line-height: 1.4;
  --ds21-field-label-size: 12px;
  --ds21-field-label-weight: var(--ds21-font-weight-semibold);
  --ds21-field-label-line-height: 1.4;
  --ds21-body-size: 13px;
  --ds21-body-weight: var(--ds21-font-weight-regular);
  --ds21-body-line-height: 1.6;
  --ds21-helper-size: 12px;
  --ds21-helper-weight: var(--ds21-font-weight-regular);
  --ds21-helper-line-height: 1.5;
  --ds21-delta-size: 12px;
  --ds21-delta-weight: var(--ds21-font-weight-semibold);
  --ds21-delta-line-height: 1.4;

  /* Foundation: semantic colors */
  --ds21-color-text-main: #0d1534;
  --ds21-color-text-secondary: #66708a;
  --ds21-color-text-helper: #98a0b4;
  --ds21-color-primary: #6f55e8;
  --ds21-color-primary-soft: #f0edff;
  --ds21-color-success: #16a34a;
  --ds21-color-warning: #ff941f;
  --ds21-color-danger: #ef4444;
  --ds21-color-surface: #ffffff;
  --ds21-color-surface-subtle: #f8fafc;
  --ds21-color-page: #fbfbff;
  --ds21-color-border: #ececf6;

  /* Foundation: spacing */
  --ds21-space-1: 4px;
  --ds21-space-2: 8px;
  --ds21-space-3: 12px;
  --ds21-space-4: 16px;
  --ds21-space-5: 20px;
  --ds21-space-6: 24px;
  --ds21-space-8: 32px;

  /* Foundation: geometry */
  --ds21-radius-dashboard-card: 12px;
  --ds21-radius-content-card: 10px;
  --ds21-radius-workflow-card: 10px;
  --ds21-radius-component: 8px;
  --ds21-radius-tag: 999px;
  --ds21-border: 1px solid var(--ds21-color-border);
  --ds21-shadow-card: 0 2px 8px rgba(15, 23, 42, 0.05);

  /* Shared buttons */
  --ds21-button-height: 34px;
  --ds21-button-height-compact: 32px;
  --ds21-button-font-size: 13px;
  --ds21-button-font-weight: var(--ds21-font-weight-medium);
  --ds21-button-font-weight-primary: var(--ds21-font-weight-semibold);
  --ds21-button-radius: 8px;
  --ds21-button-padding-inline: 16px;

  /* Dashboard: KPI 4-column specification */
  --ds21-dashboard-kpi-4-columns: 4;
  --ds21-dashboard-kpi-4-min-width: 210px;
  --ds21-dashboard-kpi-4-font-size: 28px;
  --ds21-dashboard-kpi-4-font-size-min: 26px;
  --ds21-dashboard-kpi-4-amount-font-size: 26px;
  --ds21-dashboard-kpi-4-min-height: 124px;
  --ds21-dashboard-kpi-4-padding: 18px;

  /* Dashboard: KPI 5-column specification */
  --ds21-dashboard-kpi-5-columns: 5;
  --ds21-dashboard-kpi-5-min-width: 172px;
  --ds21-dashboard-kpi-5-font-size: 24px;
  --ds21-dashboard-kpi-5-font-size-min: 22px;
  --ds21-dashboard-kpi-5-amount-font-size: 24px;
  --ds21-dashboard-kpi-5-min-height: 116px;
  --ds21-dashboard-kpi-5-padding: 16px;

  /* Dashboard: KPI 6-column specification */
  --ds21-dashboard-kpi-6-columns: 6;
  --ds21-dashboard-kpi-6-min-width: 142px;
  --ds21-dashboard-kpi-6-font-size: 20px;
  --ds21-dashboard-kpi-6-font-size-max: 22px;
  --ds21-dashboard-kpi-6-amount-font-size: 22px;
  --ds21-dashboard-kpi-6-min-height: 108px;
  --ds21-dashboard-kpi-6-padding-block: 14px;
  --ds21-dashboard-kpi-6-padding-inline: 12px;

  /* Dashboard: KPI shared behavior */
  --ds21-dashboard-kpi-font-weight: var(--ds21-font-weight-bold);
  --ds21-dashboard-kpi-line-height: 1.2;
  --ds21-dashboard-kpi-label-size: var(--ds21-field-label-size);
  --ds21-dashboard-kpi-label-weight: var(--ds21-field-label-weight);
  --ds21-dashboard-kpi-delta-size: var(--ds21-delta-size);
  --ds21-dashboard-kpi-delta-weight: var(--ds21-delta-weight);
  --ds21-dashboard-amount-white-space: nowrap;
  --ds21-dashboard-amount-word-break: keep-all;
  --ds21-dashboard-amount-overflow-wrap: normal;
  --ds21-dashboard-amount-overflow: visible;
  --ds21-dashboard-amount-text-overflow: clip;
  --ds21-dashboard-kpi-amount-font-size-narrow: 20px;
  --ds21-dashboard-kpi-amount-narrow-group: 1020px;
  --ds21-dashboard-kpi-amount-narrow-container: 160px;
  --ds21-dashboard-kpi-6-amount-min-cell-width: 170px;

  /* Dashboard: cards and density */
  --ds21-dashboard-module-padding-block: 20px;
  --ds21-dashboard-module-padding-inline: 24px;
  --ds21-dashboard-module-gap: 16px;
  --ds21-dashboard-title-content-gap: 14px;
  --ds21-dashboard-inner-gap: 12px;
  --ds21-dashboard-analysis-padding: 16px;
  --ds21-dashboard-kpi-group-radius: 8px;
  --ds21-dashboard-table-card-radius: 8px;
  --ds21-dashboard-table-head-height: 40px;
  --ds21-dashboard-table-row-height: 52px;
  --ds21-dashboard-table-cell-padding-inline: 12px;
  --ds21-dashboard-table-head-size: 12px;
  --ds21-dashboard-table-head-weight: var(--ds21-font-weight-semibold);
  --ds21-dashboard-table-body-size: 13px;
  --ds21-dashboard-table-body-weight: var(--ds21-font-weight-regular);

  /* Dashboard: compact density */
  --ds21-dashboard-compact-module-padding-block: 16px;
  --ds21-dashboard-compact-module-padding-inline: 18px;
  --ds21-dashboard-compact-module-gap: 12px;
  --ds21-dashboard-compact-title-content-gap: 10px;
  --ds21-dashboard-compact-inner-gap: 8px;
  --ds21-dashboard-compact-table-head-height: 36px;
  --ds21-dashboard-compact-table-row-height: 44px;
  --ds21-dashboard-compact-table-cell-padding-inline: 10px;

  /* Content: reading cards and note lists */
  --ds21-content-card-radius: 10px;
  --ds21-content-card-padding: 18px;
  --ds21-content-card-gap: 12px;
  --ds21-content-section-gap: 16px;
  --ds21-content-filter-content-gap: 16px;
  --ds21-content-item-title-size: 14px;
  --ds21-content-item-title-weight: var(--ds21-font-weight-semibold);
  --ds21-content-item-title-line-height: 1.45;
  --ds21-content-meta-size: 12px;
  --ds21-content-meta-weight: var(--ds21-font-weight-regular);
  --ds21-content-meta-line-height: 1.5;
  --ds21-content-note-row-height: 56px;
  --ds21-content-note-cell-padding: 12px;
  --ds21-content-year-row-height: 44px;

  /* Workflow: forms, task tables and toolbars */
  --ds21-workflow-toolbar-height: 48px;
  --ds21-workflow-toolbar-gap: 8px;
  --ds21-workflow-card-radius: 10px;
  --ds21-workflow-card-padding: 20px;
  --ds21-workflow-section-gap: 16px;
  --ds21-workflow-field-label-size: 12px;
  --ds21-workflow-field-label-weight: var(--ds21-font-weight-semibold);
  --ds21-workflow-input-size: 13px;
  --ds21-workflow-input-weight: var(--ds21-font-weight-regular);
  --ds21-workflow-table-head-height: 40px;
  --ds21-workflow-table-row-height: 48px;
  --ds21-workflow-status-size: 12px;
  --ds21-workflow-status-weight: var(--ds21-font-weight-medium);
}
