:root {
  --color-bg-page:        #FAF9F7;
  --color-bg-surface:     #FFFFFF;
  --color-bg-alt:         #F3F2EE;
  --color-border:         #E2E0DB;
  --color-border-light:   #EDEBE7;
  --color-text-primary:   #2C2C2A;
  --color-text-secondary: #6B6A66;
  --color-text-muted:     #9B9990;
  --color-text-inverse:   #FFFFFF;
  --color-brand:          #3E6E9B;
  --color-brand-soft:     #EEF2F8;
  --color-accent:         #C47339;
  --color-accent-soft:    #FBF2EA;
  --color-success:        #3A8F68;
  --color-success-soft:   #EDF6F1;
  --color-warning:        #B5820F;
  --color-warning-soft:   #FDF6EC;
  --color-danger:         #B94E4A;
  --color-danger-soft:    #FBF0EF;
  --color-ai:             #7C5CD6;
  --color-ai-soft:        #F1EDFD;
  --color-attend:         #0C82A8;
  --color-attend-soft:    #E8F6FA;
  --radius:               10px;
  --shadow-sm:            0 1px 3px rgba(0,0,0,0.03);
  --shadow-md:            0 4px 14px rgba(0,0,0,0.04);
}

@keyframes dragon-office-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}