:root {
  --s360-color-bg: #f6f7f7;
  --s360-color-surface: #ffffff;
  --s360-color-surface-muted: #fbfbfc;
  --s360-color-border: #dcdcde;
  --s360-color-border-soft: #e7e7e9;
  --s360-color-text: #1d2327;
  --s360-color-text-muted: #646970;
  --s360-color-text-soft: #50575e;
  --s360-color-primary: #2271b1;
  --s360-color-primary-hover: #135e96;
  --s360-color-success: #00a32a;
  --s360-color-warning: #b26200;
  --s360-color-danger: #b32d2e;

  --s360-space-2xs: 4px;
  --s360-space-xs: 8px;
  --s360-space-sm: 12px;
  --s360-space-md: 16px;
  --s360-space-lg: 24px;
  --s360-space-xl: 32px;

  --s360-radius-sm: 6px;
  --s360-radius-md: 8px;
  --s360-radius-lg: 10px;

  --s360-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --s360-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);

  --s360-font-size-xs: 12px;
  --s360-font-size-sm: 13px;
  --s360-font-size-md: 14px;
  --s360-font-size-lg: 16px;
  --s360-font-size-xl: 20px;
  --s360-font-weight-medium: 500;
  --s360-font-weight-semibold: 600;
  --s360-font-weight-bold: 700;

  --s360-line-height: 1.5;
}